Question

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

输入字段必须跨越整个宽度并包裹在行的末尾或至少在固定数量的字符之后。标题不一定必须在同一行：

Please introduce yourself: _____________________________
________________________________________________________

我试图实现这一点：

<p contentEditable="true">或<textarea>对我不起作用，因为border-bottom:仅适用于最后一行，text-decoration: underline;不适用于空白区域。
然后我在彼此下面创建了多个<input type="text">并使用javascript事件包装了文本。这适用于简单的文本输入，但无法选择文本，在两者之间的某处插入文本等。这太复杂了，因为这应该支持尽可能多的电子书设备，这可能无法在测试阶段存活。

我想在ePUB书中使用它，但随时可以发布有关Web浏览器行为的答案。我不想使用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-image，这可能是兼容性问题。如果您需要广泛的跨浏览器支持，您还可以：

只存储所有可能高度的图像
动态创建一个gif / png并使用base64

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

多行问卷可编辑

1 个答案: