多行问卷可编辑 [英] Multiline questionaire editable

问题描述

我想为类似问卷的表单创建一个多行字段，类似于您在交互式PDF文档中看到的字段。

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: _____________________________
________________________________________________________

我试图实现这一点：

• < p contentEditable =true> 或< textarea> 对我不起作用，因为 border-bottom：仅适用于最后一行， text-decoration：underline; 不包括空格。


• 然后我在彼此之下创建了多个< input type =text> 并使用javascript事件包装文本。这适用于简单的文本输入，但无法选择文本，在两者之间的某处插入文本等。这太复杂了，因为这应该支持尽可能多的电子书设备，这可能无法在测试阶段存活。

• <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.

我想在ePUB书中使用它，但随时可以发布有关网络浏览器行为的答案。我不想使用JQuery。

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.

推荐答案

要覆盖未知的行高，可以使用JavaScript来确定行高通过添加一行文字并测量高度差。
第二步，当 height 包含可编辑区域内的行高时，您可以动态生成背景图像：

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

这会创建一个svg-image，这可能是兼容性问题。如果您需要广泛的跨浏览器支持，您还可以：

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

• 只存储具有所有可能高度的图像


• 动态创建一个gif / png并使用base64对其进行编码

在我的情况下，它只需要在iPad-App iBook用于阅读* .ePUB-Books。

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

这篇关于多行问卷可编辑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！