在 input type="text" 中包装文本元素 HTML/CSS [英] Wrapping text inside input type="text" element HTML/CSS

问题描述

如下所示的 HTML，

The HTML shown below,

<input type="text"/>

在浏览器中显示如下:

---

当我添加以下文本时，

is displayed in a browser like so:

---

When I add the following text,

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

The quick brown fox jumped over the lazy dog.

使用下面的 HTML，

Using the HTML below,

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

它在浏览器中显示如下:

---

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

---

我希望输入元素中的文本换行.这可以在没有 textarea 的情况下完成吗?

it is displayed in a browser like so:

---

But I would like it to be displayed in a browser like so:

---

I want the text in my input element to wrap. Can this be accomplished without a textarea?

推荐答案

那是 textarea 的工作 - 用于多行文本输入.input 不会做；它不是为这样做而设计的.

That is the textarea's job - for multiline text input. The input won't do it; it wasn't designed to do it.

所以使用textarea.除了视觉上的差异外，它们还可以通过 JavaScript 以相同的方式访问(使用 value 属性).

So use a textarea. Besides their visual differences, they are accessed via JavaScript the same way (use value property).

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

You can prevent newlines being entered via the input event and simply using a replace(/ /g, '').

这篇关于在 input type="text" 中包装文本元素 HTML/CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！