If you want to use text-input in a prototype, you can use Editable in Prototype on any cell and it has editable text. Often this is enough, but sometimes you need more than one text field and want and need a realistic way to jump to the next on with a tab. Here a small example which shows two improvements you can make:
- We want that hitting Tab to jumping to the next cell selects all the text in the textfield
- but if you click into a text field with the mouse, you want to directly select text and not use the behaviour above.
The “Input”-cell contains two event-handlers for this:
- Focus-Event is used to select the content on focus
- Mouse-Down-event is used to set a flag that we don’t want the focus if the mouse is used. Therefor we store a flag which is read in the focus-event handler.
Opening the page the first cell should be already selected, which is done the in the Load-Screen-Event:
(Unfortunately this does not work in Safari in the iframe below, therefor the extra link. In other browsers it scrolls directly to the embedded prototype… )
textfield.zip (664.5 KB)