#javascript #jquery #css
#javascript #jquery #css
Вопрос:
Я пытаюсь создать веб-приложение с полем ввода, в которое пользователи могут вводить. Когда определенные строки распознаются, я бы хотел, чтобы пользователь мог навести на них курсор, чтобы выполнить определенное действие.
Однако, поскольку я использую
<input type="text">
чтобы собрать вводимый пользователем текст (вместо редактируемого div из-за отсутствия совместимости с браузером), я не могу поместить дочерние элементы или промежутки в само текстовое поле. Вместо этого я вынужден накладывать сверху divs, которые могут запускать события :hover или .hover() .
Проблема возникает здесь — если я хочу, чтобы пользователь мог щелкнуть по текстовому полю под этими наложенными разделениями, я должен установить для них значение
"pointer-events:none;"
Это полностью нарушает функциональность запуска события наведения.
Я проверил несколько похожих вопросов, но ни один из них не соответствует моей проблеме, поскольку ни один из них не сфокусирован на элементах ввода внизу… Если бы это было изображение или какой-либо другой элемент внизу, было бы относительно легко использовать javascript / jQuery для передачи событий щелчка в нижний элемент вручную (где местоположение щелчка не имеет значения).
Ссылка на jsFiddle здесь: http://jsfiddle.net/eBnmw /
(работает в Chrome и Safari, не уверен в IE)
Есть предложения?
Комментарии:
1. поместите четкий div поверх всех, вызовите input.focus() при нажатии на этот div…
2. кроме того, contentEditable имеет широкую совместимость, даже на мобильных устройствах…
3. Спасибо dandavis — но, как я упоминал выше, вызов focus() усложняется, когда он вводится снизу, поскольку Местоположение щелчка (т. Е. На Какую букву они нажимают) имеет такое же значение, как и тот факт, что он получает фокус… Кроме того, полезно знать о contenteditable . Я не мог заставить его работать в Safari. Я проведу дополнительные исследования по этому вопросу.