All geek questions in one place

How to select tinyMCE textarea when pressing the tab key?

Hi I looked like this code

<form method="post" action="/" name="form" autocomplete="off"> <input type="text" name="title" /> <textarea name="body"></textarea> <input type="text" name="tags" /> <input type="submit" name="submit" value="Send" /> </form>

Where the "textarea" problem is the tinyMCE problem ... occurs when I try to move the selection through the input and textarea elements. When the page loads, it introduces focus [name = text], but when I press the Tab key, it selects the input [name = tags] instead of textarea [name = body] (which is next) Can you help me in this matter?

+6
source share
4 answers

This is not possible with conventional tab indices, since TinyMCE actually hides <textarea> and creates an <iframe> with an editor in it. You can do the work around by forcing you to focus on the editor in the blur event of the previous element in javascript, here is ajQuery compressed from my head:

 $('#prev-input').blur(function(){ tinyMCE.get('textarea').focus(); });

Then, as soon as the user leaves the previous input focus, he goes to the TinyMCE editor, you can also add the blur () method to go to the next element.

+5
source

I solved this by adding "tabfocus" to the plugins and then add tabfocus_elements: ": prev ,: next"

http://tinymce.moxiecode.com/wiki.php/Plugin:tabfocus

http://tinymce.moxiecode.com/wiki.php/tabfocus_elements

+4
source

I need a custom tab order from another element on the page. The code I used for this in IE11 was

 var button = $('#btn-id'); button.on('keydown', function (e) { if ((e.which === 9 && !e.shiftKey)) { e.preventDefault(); $(tinyMCE.get()[0].contentWindow).focus(); } });

Keep in mind that the above code will only work if you have only one editor per page. Otherwise, you have to cycle through the array returned by tinyMCE.get() to find the correct editor to set the focus.

0
source

Source: https://habr.com/ru/post/885419/

More articles:


All Articles