在 input type="text" 元素 HTML/CSS 中包装文本

Posted 2023-02-19

【中文标题】在 input type="text" 元素 HTML/CSS 中包装文本

【英文标题】：Wrapping text inside input type="text" element HTML/CSS

【发布时间】：2011-07-14 06:53:09

【问题描述】：

如下所示的 html，

<input type="text"/>

在浏览器中显示如下：

---

当我添加以下文本时，

敏捷的棕色狐狸跳过了懒惰的狗。

使用下面的 HTML，

<input type="text" value="The quick brown fox jumped over the lazy dog."/>

它在浏览器中显示如下：

---

但我希望它像这样显示在浏览器中：

---

我希望输入元素中的文本换行。 这可以在没有文本区域的情况下完成吗？

【问题讨论】：

不，我不认为它可以。但是为什么 textarea 不是一个选项？

有时不能使用文本区域，因为您不想允许输入多行文本。只是为了换行一行文本（注意：它们不是一回事）。

有一个与CSSWG 讨论用于标准化的解决方案，但遗憾的是我找不到问题。

@Pekka웃 不是说它是相关的，但一些原因包括：我们不能在 textareas 上使用 html5 验证；我们不能使用模式约束来验证文本区域； textarea 是输入 type=text 的不必要同义词（它是输入文本类型！），这意味着样式的两倍等，等等。总之有很多原因。

如果能够包装 input type=url 元素也很好。 Textarea 不会提供该功能（选择适当的键盘和验证 URL 等等）。

【参考方案1】：

分词会模仿一些意图

    input[type=text] 
        word-wrap: break-word;
        word-break: break-all;
        height: 80px;
    

<input type="text" value="The quick brown fox jumped over the lazy dog" />

作为一种解决方法，此解决方案在某些浏览器上失去了效力。请查看演示：http://cssdesk.com/dbCSQ

【讨论】：

我刚刚在 Firefox 43.0.4 中对其进行了测试，但它不起作用，但在 Safari 9 和 Chrome 48 中它似乎可以工作：cssdesk.com/dbCSQ

@JasonSperske 附加的演示在 Firefox 45 和 Chrome 50 中对我都不起作用。

解决方案至少从 chrome 50 开始已经过时了 :(

忘记这个解决方案：不适用于 Chrome 74/75、Firefox 63/67、Edge 42、IE 11 和 UCBrowser 7.0（但适用于 GNOME Web 3.28 - AppleWebKit/605.1.15）

演示链接现在也断开了

【参考方案2】：

要创建一个文本输入，其中引擎盖下的值是单行字符串，但以自动换行格式呈现给用户，您可以在 <div> 或其他元素上使用 contenteditable 属性：

const el = document.querySelector('div[contenteditable]');

// Get value from element on input events
el.addEventListener('input', () => console.log(el.textContent));

// Set some value
el.textContent = 'Lorem ipsum curae magna venenatis mattis, purus luctus cubilia quisque in et, leo enim aliquam consequat.'

div[contenteditable] 
  border: 1px solid black;
  width: 200px;

<div contenteditable></div>

【讨论】：

我已经研究过使用这种技术，它有一些警告。我喜欢它自动正确调整大小，但它带来了一些复杂性。例如，如果您想保留用户输入的换行符，那么textContent 将不起作用。如果您希望换行符提交表单（正常的 HTML 行为），那么您需要附加一个 keydown 事件侦听器来拦截该键码。

请注意，这允许富文本格式，例如，我可以通过选择单词并按 Ctrl+B 将其标记为粗体。

【参考方案3】：

这就是textarea 的工作——用于多行文本输入。 inputwon't do it；它不是为此而设计的。

所以使用textarea。除了它们的视觉差异之外，它们通过 javascript 以相同的方式访问（使用 value 属性）。

您可以防止通过input 事件输入换行符，只需使用replace(/\n/g, '')。

【讨论】：

这并没有真正回答如何收集单行输入的问题，同时在输入过程中显示它。

这样做的一个主要问题是文本区域会抑制移动设备上的“开始”按钮。

@alex 没错。因此，如果你想要真正的多行输入，那么 textarea 会更好，但如果你只是想要自动换行输入，那么 css 解决方案会更好。

我正要说<textarea> 不适用于jQuery 的自动完成功能，但只需将<input> 更改为<textarea> 即可。标准万岁！

如上所述：换行！== 多行字符串。我不确定为什么这是公认的答案，因为它没有回答问题。

【参考方案4】：

你可以不使用输入，你需要使用 textarea 来代替。 使用带有wrap="soft"code 的 textarea 和可选的其余属性，如下所示：

<textarea name="text" rows="14" cols="10" wrap="soft"> </textarea>

属性：要将其中的文本数量限制为“40”个字符，您可以添加属性maxlength="40"，如下所示：<textarea name="text" rows="14" cols="10" wrap="soft" maxlength="40"></textarea> 隐藏滚动的样式。如果您只使用overflow:scroll; 或overflow:hidden; 或overflow:auto;，它只会对一个滚动条生效。如果您希望每个滚动条具有不同的属性，请在样式区域中使用类似 overflow:scroll; overflow-x:auto; overflow-y:hidden; 的属性： 要使 textarea 不可调整大小，您可以使用 resize:none; 的样式，如下所示：

<textarea name="text" rows="14" cols="10" wrap="soft" maxlength="40" style="overflow:hidden; resize:none;></textarea>

这样，您可以拥有或示例一个具有 14 行和 10 个列的文本区域，其中包含自动换行和“40”个字符的最大字符长度，其工作方式与输入文本框完全相同，但使用行而不使用输入文本。

注意： textarea 适用于行，不像输入 <input type="text" name="tbox" size="10"></input> 那样不完全适用于行。