7

I'm looking for a way of constructing a multi-line InputField in a cloud notebook. That is, a text field that supports the following five behaviors:

  1. The 'Enter' key should make a new line
  2. Anywhere you click within it, the InputField will begin editing
  3. Anywhere you mouseover the InputField, the mouse changes to a cursor
  4. The 'Tab' key should make a new tab indent
  5. The InputField rectangle should be resizeable

Is there any workaround to get at least the first two desired properties above in a cloud notebook?

What I've tried:

In (desktop) Mathematica, you can hack around InputField to get the newline-return behavior as described in this post:

For example, here's one way to do it:

text = ""; EventHandler[
    InputField[ Dynamic @ text, String, ContinuousAction -> True, ImageSize->{300,100}],
    {"ReturnKeyDown" :> Paste["\n"]}
]

I have tried all of the workarounds in the link, and each one fails in a Cloud notebook.

M.R.
  • 31,425
  • 8
  • 90
  • 281
  • A workaround I have found for point (2) is to add a FieldHint, for example InputField["", String, ImageSize -> {450, 350}, FieldHint -> StringRiffle[Table[".",3000]," "]] -- but this only works when you have no content in the input field yet. – Gerli Apr 23 '20 at 09:48
  • I would rather not have dots everywhere in my text field... – M.R. Apr 23 '20 at 20:08
  • Neither would I :) It's not pretty but it kind of sort of works... – Gerli Apr 24 '20 at 11:29
  • That is not a solution – M.R. May 12 '20 at 07:08

2 Answers2

1

This is easier to do with an HTML textarea. The following takes care of the TAB issue.

html = "<textarea id=\"test\" name=\"myTest\" rows=\"3\" cols=\"30\" \
onkeydown='var key = event.keyCode;if (key==9) \
{event.preventDefault();str=this.selectionStart;end=this.selectionEnd;\
this.value = this.value.substring(0,str) + \"\\t\" + \
this.value.substring(end);this.selectionStart =
        this.selectionEnd = start + 1;}'></textarea>";

The html can be embedded in a cloud notebook. The minimum size of the textarea is set in the html, but is resizable to a larger size. However the cell containing the textarea does not seem to resize to a larger size.

CloudDeploy[EmbeddedHTML[html], Permissions -> "Public"]

Another option is to export the textarea html.

CloudDeploy[ExportForm[html, "HTML"], Permissions -> "Public"]
Jean-Pierre
  • 5,187
  • 8
  • 15
1

Not a solution, more of a funny bug in the Cloud (and a sign of how hard this may be)

enter image description here

You might be best off writing your functions to post-process data in a regular-schmegular Cell

b3m2a1
  • 46,870
  • 3
  • 92
  • 239