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

Question

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

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

Please introduce yourself: _____________________________ 
________________________________________________________

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

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

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

Answer 1

Чтобы покрыть неизвестную высоту линии, можно использовать 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.