Demo - Tabs In TextArea

Show and Tell
#1

Here’s a very simple demo that stops the TAB key from exiting a text area and instead inserts “\t” tabs.

Handy if you are entering code.

https://anvil.works/ide#clone:7H3SM2OHGYYBX27Q=JH3ZEGLSFDWJ3O24QDXSXJGX

It won’t maintain tab position on pressing enter, nor will it block tab or anything fancy like that. It’s just a straight forward insert whilst overriding the default action of TAB which is to move focus to the next control.

The JS is lifted straight from this SO page :

Maybe it will be useful to someone.

3 Likes
#2

@david.wylie

Am I right that I just need to

  1. add the asset tabarea.js and
  2. the role line in init ?

Because, as usual, :slight_smile: I can’t get it to work in MY project despite cloning YOURS . .

My scenario is a text area on a child form called up by a side bar menu item.
TAB continues to cause change of focus.
But your clone works.

#3

He also added the following lines right at the bottom of the HTML page (also in the Assets section), to load the JS:

<!-- This loads the custom JS asset -->
<script src="_/theme/tabarea.js"></script>

Hope that helps!

3 Likes
#4

I could have sworn I posted that same message - erm, mind must have wandered…

1 Like