2013-04-26 4 views
1

В моем проекте я использую «контент-контент» div. Я пытаюсь создать функциональность автозаполнения, используя этот div. Всякий раз, когда я печатаю какие-либо слова, некоторые предложения должны быть видны в другом div. И когда я нажимаю ENTER, выбранное предложение должно быть заменено введенным текстом в «contenteditable» div. Затем, когда я нажимаю SPACE, дальнейшие предложения должны быть видны.Невозможно получить значение позиции каретки после установки значения каретки в определенную позицию

Для более четкого объяснения, пожалуйста, см. Это fiddle.

В скрипке, введите несколько букв, а затем нажмите ENTER затем SPACE.

Когда я нажимаю SPACE, отображается окно предупреждения (для тестирования). Это говорит текущее положение каретки в «contenteditable» div.

Но когда я нажимаю ENTER, а затем SPACE, текущее положение каретки неверно, то есть 0.

Насколько я понял, если я не использую функцию placeCaretAtEnd(), тогда я получаю позицию каретки правильно. Но в моем случае я хочу использовать оба (getCaretPosition() и placeCaretAtEnd()).

Я проверяю это в Firefox. (В Chrome, кажется, работает нормально)

Мне нужно решение, которое работает в IE8 +, Chrome и Firefox. Пожалуйста помоги.

+0

Столкнулся с такой же проблемой на Firefox, это мне потребовалось много времени, чтобы найти, где проблема находит. Похоже на ошибку Firefox. Наконец-то вы нашли легкое решение? – jiyinyiyong

+0

@jiyinyiyong да проверьте ниже ответ. Это прекрасно решило мою проблему. :) –

+0

Рад это найти. Но когда я скопировал код как функцию «placeCaretAtEnd2()» и заменил мою старую версию, осталось оставить caretPosition на '0'. Я попытался «утешить».log' результат, который я получил после 'getcaretPosition' сразу после' placeCaretAtEnd', нашел, что это '0', а не целое'> 0'. Спасибо, в любом случае. Не могли бы вы показать мне версию Firefox, где она работает, поэтому я могу попробовать еще раз? – jiyinyiyong

ответ

2

Вам нужно более сложное средство для получения позиции каретки, которая работает со всем текстом в редактируемом div. Вы можете использовать код от this question, хотя я не совсем уверен, чего вы пытаетесь достичь. У вас могут возникнуть проблемы, связанные с тем, что код не учитывает разрывы lin, подразумеваемые <br> и блокирующие элементы.

Демо: http://jsfiddle.net/BN5N6/12/

1

Извините, я не могу дать вам полный ответ. Я бы опубликовал это только как комментарий. У меня нет комментариев. Играя со своей скрипкой, я заметил, что в Firefox (только в браузере, в котором я тестировался) после нажатия клавиши «Ввод» у div будет дополнительный дочерний текстовый узел. Это не было результатом вашей функции placeCaretAtEnd. Кажется, что-то, что Firefox делает для вас, когда вы нажимаете enter.

Похоже, что 0, которое вы получаете в консоли, является позицией каретки в новом текстовом узле, созданным для вас браузером. Если после нажатия ввода вы щелкнете в исходном текстовом узле и нажмите пробел, консоль предоставит вам правильную позицию каретки (еще раз, относительно текстового узла, в котором находится курсор).

+0

+1 Да, кажется, вы правы :). Любые предложения по решению этой проблемы? –

Смежные вопросы