#tinymce #tabindex
#tinymce #tabindex
Вопрос:
Привет, я получил похожий на этот код
<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>
Где «текстовое поле» — это TinyMCE … проблема возникает, когда я пытаюсь переместить выделение с помощью элементов ввода и текстового поля.
При загрузке страницы она фокусируется на вводе [name = text], но когда я нажимаю клавишу Tab, вместо этого выбирается input [name = tags] textarea [name= body] (который следующий)
Можете ли вы помочь мне с этой проблемой?
Ответ №1:
Это невозможно с обычными индексами табуляции, поскольку TinyMCE фактически скрывает <textarea> и создает <iframe> текстовое поле с редактором в нем. Вы могли бы обойти это, принудительно сосредоточившись на редакторе в событии размытия предыдущего элемента в javascript, вот ajQuery, вырезанный из моей макушки:
$('#prev-input').blur(function(){
tinyMCE.get('textarea').focus();
});
Тогда, как только пользователь покинет предыдущий ввод, фокус переместится в редактор TinyMCE, возможно, вы также могли бы добавить метод blur (), чтобы перейти к следующему элементу.
Комментарии:
1. Звучит неплохо, но возвращает ошибку —- Неперехваченная ошибка типа: не удается вызвать метод ‘focus’ неопределенного
2. Я думаю, что он не может найти «текстовую область», потому что объект TinyMCE существует… Я попробовал использовать идентификатор и имя текстовой области вместо «textarea» в get (), но все равно не сработает.
3. Я сделал это с помощью —-> TinyMCE.activeEditor.focus();
4. имейте в виду, что если у вас несколько редакторов на одной странице, activeEditor может ссылаться на другой редактор (например, когда вы написали текст в редакторе № 2, но затем нажали кнопку в редакторе № 1)
5. Этот код будет работать не во всех случаях. Если у вас более 2 элементов, подлежащих фокусировке. Например. Если ваша последовательность равна 1-2-3. это означает, что если вы потеряли фокус с 1, то перейдите к 2, а затем к 3. но если вы хотите перейти непосредственно с 1 на 3 и пытались нажать на 3, то фокус будет установлен на 2, а не на 3. Я попробовал это и столкнулся с той же проблемой.
Ответ №2:
Я решил эту проблему, добавив ‘tabfocus’ в плагины, а затем добавив tabfocus_elements : «:предыдущий ,: следующий»
Комментарии:
1. к сожалению, это не работает с установкой фокуса на
<label for="tinyMCE">
Ответ №3:
Есть плагин, решающий эту проблему
Я знал это с форума TinyMCE
Ответ №4:
Мне нужен был пользовательский порядок табуляции для другого элемента на странице. Код, который я использовал для решения этой проблемы в IE11, был
var button = $('#btn-id');
button.on('keydown', function (e) {
if ((e.which === 9 amp;amp; !e.shiftKey)) {
e.preventDefault();
$(tinyMCE.get()[0].contentWindow).focus();
}
});
Имейте в виду, что приведенный выше код будет работать, только если у вас есть только один редактор на странице. В противном случае вам придется перебирать массив, возвращаемый tinyMCE.get() , чтобы найти правильный редактор для установки фокуса.
Ответ №5:
Я обнаружил, что focus событие запускается, но фокусировка в элементе (контейнере) работала не все время.
В моем случае я открывал вкладки из редактора 1-4, и когда я нажимал shift tab, я терял фокус на экземпляре.
Чтобы исправить это, я добавил следующее к событию установки TinyMCE
setup: function(editor) {
editor.on("focus", function(e) {
e.target.editorContainer.scrollIntoView();
});
}