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, becauseborder-bottom:
only works for the last line andtext-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.
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:This creates an svg-image which may be a compatiblity issue. If you need wide cross-browser support, you could also:
In my case it only had to be working in the iPad-App iBook for reading *.ePUB-Books.