<input type="text" />中的多行输入

我在一个表单中输入了这个文本:

<input type="text"
       cols="40" 
       rows="5" 
       style="width:200px; height:50px;" 
       name="Text1" 
       id="Text1" 
       value="" />

我试图让它接受多行输入。宽度和高度使框更大，但用户可以输入所有(s)他想要的文本，但它只填充一行。

我如何使输入更像一个文本区域?

当前回答

如果你正在使用React，你可以使用第三方UI库MUI。它有一个自定义的私有<Input>元素，带有多行选项。

正如LSE注释的那样，最终它被呈现为<textarea>。

  <FormControl>
    <InputLabel htmlFor="textContract">{`textContract`}</InputLabel>
    <Input
      id="textContract"
      multiline
      rows="30"
      type="text"
      value={props.textContract}
      onChange={() => {}}
    />
  </FormControl>

https://material-ui.com/components/text-fields/#multiline

2020-06-10 02:32:49

其他回答

如果你需要多行文本区域与自动高度增加功能，你可以使用以下简单的javascript，

函数auto_height(elem) {/* javascript */ element .style.height = "1px"; element .style.height = (element . scrollheight)+"px"; ｝ .auto_height {/* CSS */ 宽度:100%; ｝ <textarea rows="1" class="auto_height" oninput="auto_height(this) "" > < / >文本区域

2020-03-27 08:29:57

通过赋予word-break: break-word，可以使文本输入多行;属性。(仅在Chrome中测试)

2013-12-04 13:30:39

如果您不需要编辑它，您可以使用

< span >文本在这里< / span >

它将随着文本展开。

2022-02-02 17:49:30

如果你正在使用React，你可以使用第三方UI库MUI。它有一个自定义的私有<Input>元素，带有多行选项。

正如LSE注释的那样，最终它被呈现为<textarea>。

  <FormControl>
    <InputLabel htmlFor="textContract">{`textContract`}</InputLabel>
    <Input
      id="textContract"
      multiline
      rows="30"
      type="text"
      value={props.textContract}
      onChange={() => {}}
    />
  </FormControl>

https://material-ui.com/components/text-fields/#multiline

2020-06-10 02:32:49

你不能。在编写本文时，唯一被设计为多行的HTML表单元素是<textarea>。

2011-06-07 08:26:55

<input type="text" />中的多行输入

推荐文章

最新文章

标签