7
$\begingroup$

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.

Improve this question
$\endgroup$
4
  • $\begingroup$ 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. $\endgroup$
    – Gerli
    Apr 23, 2020 at 9:48
  • $\begingroup$ I would rather not have dots everywhere in my text field... $\endgroup$
    – M.R.
    Apr 23, 2020 at 20:08
  • $\begingroup$ Neither would I :) It's not pretty but it kind of sort of works... $\endgroup$
    – Gerli
    Apr 24, 2020 at 11:29
  • $\begingroup$ That is not a solution $\endgroup$
    – M.R.
    May 12, 2020 at 7:08

2 Answers 2

Reset to default
1
$\begingroup$

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"]
Improve this answer
$\endgroup$
1
$\begingroup$

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

Improve this answer
$\endgroup$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.