Многострочный вопросник редактируемый

Question

Многострочный вопросник редактируемый

1

Я хочу создать многострочное поле для формы, подобной опросу, подобной той, что вы видите в интерактивных документах PDF.

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

Please introduce yourself: _____________________________
________________________________________________________

Есть несколько вещей, которые я пытался достичь:

<p contentEditable="true"> или <textarea> не работал у меня, потому что border-bottom: работает только для последней строки, а text-decoration: underline; не охватывает пустое пространство.
тогда я создал несколько <input type="text"> ниже друг друга и обернул текст, используя события javascript. Это работает для простого ввода текста, но не позволяет выбрать текст, вставлять текст где-то между ними. Это просто становится слишком сложным, и поскольку это должно поддерживать как можно больше устройств ebook, это, вероятно, не сохранится на этапе тестирования.

Я хочу использовать это в ePUB-книге, но не стесняйтесь публиковать ответы о поведении веб-браузера. Однако я не хочу использовать JQuery.

Andre 02 сен. 2013, в 14:34

Источник

1

Используйте повторяющийся фон, чтобы получить линии.
Halcyon 02 сен. 2013, в 11:41
2

Помогает ли это ТАК сообщение ?
Harry 02 сен. 2013, в 11:41

Теги:

javascript

html5

epub

1 ответ

Ещё вопросы

Используйте повторяющийся фон, чтобы получить линии.
Помогает ли это ТАК сообщение ?

Andre · Accepted Answer · 2013-09-03T03-47-00.000Z

Чтобы покрыть неизвестную высоту линии, вы можете использовать JavaScript для определения высоты строки путем добавления строки текста и измерения разности высот. На втором этапе, когда height содержит высоту строки внутри редактируемой области, вы можете динамически генерировать фоновое изображение:

var svg = "<svg xmlns='http://www.w3.org/2000/svg' width='1' height='" + height + "'><line x1='0' y1='" + height + "' x2='1' y2='" + height + "' stroke='black' stroke-width='1px'/></svg>";
your_element.setAttribute('style','background-image: url("data:image/svg+xml;utf8,' + svg + '")}');

Это создает svg-образ, который может быть проблемой совместимости. Если вам нужна широкая поддержка кросс-браузера, вы также можете:

просто хранить изображения со всеми возможными высотами
создать gif/png на лету и закодировать его с помощью base64

В моем случае он должен был работать в iPad-приложении iBook для чтения *.ePUB-Books.