1

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

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

请介绍一下你自己： _____________________________
_______________________________________________________

我尝试了几件事来实现这一目标：

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

我想在 ePUB 书中使用它，但随时发布有关 web-browser-behaviour 的答案。我不想使用 JQuery。

4

1 回答 1

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。

于 2013-09-03T06:10:00.247 回答