Multiline questionaire editable

Question

I want to create a multiline field for a questionaire-like form similar to the ones you see in interactive PDF documents.

The input field must span the whole width and wrap at the end of the line or at least after a fixed number of characters. The caption does not necessarily have to be in the same line:

Please introduce yourself: _____________________________
________________________________________________________

There are several things I have tried to achieve this:

• <p contentEditable="true"> or <textarea> did not work for me, because border-bottom: only works for the last line and text-decoration: underline; does not cover the empty space.
• then I created multiple <input type="text"> below each other and wrapped the text using javascript events. This works for simple text-input but fails on selecting text, inserting text somewhere in between etc. This just gets too complicated and since this should support as many ebook devices as possible this probably will not survive the testing phase.

I want to use this inside an ePUB-book, but feel free to post answers regarding web-browser-behaviour. I do not want to use JQuery though.

Xylidine

Use a repeating background to get the lines. – Wicopy

Does this SO Post help? – Kemerovo

Answer 1

To cover unknown line-height one can use JavaScript to determine the line-height by adding a line of text and measure the height-difference. In a second step, when height contains the line-height inside the editable area you can dynamically generate a background-image:

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 + '")}');

This creates an svg-image which may be a compatiblity issue. If you need wide cross-browser support, you could also:

• just store images with all possible heights
• create a gif/png on the fly and encode it using base64

In my case it only had to be working in the iPad-App iBook for reading *.ePUB-Books.

Xylidine