Как сделать, чтобы при фокусе любого input на странице, под этим input появлялось окошко с кнопками спец.символов?

Question

[molokhan]

Есть страница, на которой расположено несколько элементов input. Нужно, чтобы при выборе любого из этих input, под ним появлялось окошко, в котором будут кнопки спец. символов, доступных для ввода. При этом это окошко одинаково для любых полей ввода.
Изначально я хотел создать отдельный блок с этими кнопками, с помощью position: absolute сделать так, чтобы он всегда находился снизу родителя, а после с помощью JS добавлять этот блок внутрь любого сфокусированного input. Однако, Input это тег, не требующий закрытия, а значит выступать родителем не сможет.
Каким другим способом можно осуществить такую привязку?

Comments

[Dymok]

сделать для инпута обертку, в которую уже добавлять этот блок с символами, нет?

[molokhan]

Dymok, как вариант. Дело в том что сверстано уже несколько страниц, в которых есть множество таких инпутов. При этом присутствуют скрипты, которые манипулируют с узлами, и если изменить разметку, то и скрипты придется корректировать. Поэтому и решил задать вопрос, может быть есть какой-то более легкий способ, который я не вижу

[Дмитрий]

При этом присутствуют скрипты, которые манипулируют с узлами, и если изменить разметку, то и скрипты придется корректировать.

Если из-за обертки инпута в див нужно корректировать скрипты, значит скрипты составлены неверно. Почем у они могут перестать работать? Только если вы используете запрос типа "ТЭГ>IINPUT", в противном случае сбиться ничего не должно

[Илья]

Дмитрий, не только. Могут быть и другие ситуации. Самое простое -- использование parent().

[Дмитрий]

Илья, Глупо использовать parent, нужно использовать closest с селектором

[Илья]

Дмитрий,

Глупо использовать parent, нужно использовать closest с селектором

Это вообще к чему? Это вообще как относится к контексту?
Наличие parent() в коде может вызвать проблемы при оборачивании INPUT. А Ваш комментарий о чем вообще? Как-будто из параллельной вселенной ))

[Дмитрий]

Илья, Возможно вы не знаете что делает метод closest(), в противном случае непонятно распараллеливание вселенных.

[Илья]

Дмитрий, Вы написали комментарий, который никак не относится к контексту. И это действительно смешно. На что я и указал ))
Может Вы и понимаете философию использования parent() и closest(). Но это не имеет отношения к контексту. Поэтому возникла идея о параллельных вселенных ))

Answer 1

[Илья]

Если обертку создать нет возможности, решайте задачу "в лоб".
Сам шаблон окошка вынесите в BODY, чтобы окошко позиционировалось относительно страницы. Далее скриптами по определенному событию вычисляйте глобальные координаты активного INPUT и прописывайте соответствующие координаты своему окошку. Это не так сложно.