如何使用textarea作为输入？

我充当这样一个输入文本框：如何使用textarea作为输入？

<div class="control-group"> 
    <label class="required"> 
    Enter stuff here....</label> 
    <input type="text" placeholder="Required Field" class="form-control" id="secid"> 
</div>

我需要在这个意义上，使这个文本框“扩展”，当用户输入一些文字比文本框的宽度长，他/她应该可以手动放大该盒子。很像textarea标签。我该如何做到这一点？

来源

2014-10-08 Core_Dumped

其实这不应该是一个问题，因为textarea不是一个文本框，因为香蕉不是一个苹果。作为一名开发人员，我们的工作是向那些创造这种需求的人们展示，这在UE等方面并不是必须的。 – Jeredepp 2014-10-08 09:50:03

从一开始就只能使用textarea并且像inbutbox一样定义它的大小吗？如果您获得更多字符，只需将textarea增加到正常大小。 – klml 2014-10-08 10:17:13

@klml在我用textarea标签替换它之后，不需要输入标签吗？ – 2014-10-08 10:29:16

您应该定义最大字符数，直到输入将被<textarea />元素动态替换，并且如果用户删除字符，再次将输入转换为单行文本框。

来源

2014-10-08 09:49:46

以下是我如何强烈反对它的建议，因为这是我们决定何时使用textarea和何时使用inputtext的工作的一部分。

var maxnum = 50; 

function checkForReplacementTextarea(){ 
    var content = $('#secid').val(); 
    var strlenght = content.length; 

    if(strlenght>=maxnum){ 
    $('#secid').replaceWith('<textarea id="secid" class="form-control" rows="4" cols="50" onkeydown="checkForReplacementTextarea()">'+content+'</textarea>'); 
    $('#secid').focus(); 
    }else if(strlenght<maxnum){ 
    $('#secid').replaceWith('<input type="text" placeholder="Required Field" value="'+content+'" class="form-control" id="secid" onkeydown="checkForReplacementTextarea()">'); 
    $('#secid').focus(); 
    } 
}

警告：焦点（）在字符串的开头设置光标，实现光标移动到结束你的文字，你必须清空，关注它后重新填充值。

调用checkForReplacementTextare（）在每次更新你的textarea

<input type="text" onkeydown="checkForReplacementTextarea()">

来源

2014-10-08 09:58:00 Jeredepp

我对Web Dev真的很陌生，所以请原谅我的问题。我用'textarea'标签取代'input'标记后不需要吗？ – 2014-10-08 10:26:05

没有问题，这就是为什么我用replaceWith（）函数切换元素，这不是一个漂亮的解决方案，原因有几个。例如，你操纵（不必要地）DOM方式太多了，而且由于你使用的是id，我必须替换元素，因为如果我只是隐藏它，我不得不删除id，因为你不会能够访问第二个elememt。一般来说，我强烈建议我的解决方案。但是这是一种可能性。 – Jeredepp 2014-10-08 11:15:27

原则上可以在input元素上使用CSS属性resize也是如此，但在实践中，这是浏览器不支持。所以没有直接的解决方案。

作为解决方法，您可以添加一个使元素可调整大小的脚本。设计和实现它将取决于你，它将不可避免地与浏览器内置的调整textarea大小的工具不同。

或者，你可以通过一个textarea元素替换input元素，并使其单行和可调整大小的水平（只），采用适当的resize，在支持可调整大小的浏览器。例如：

<div class="control-group"> 
<label class="required" for="secid"> 
Enter stuff here....</label>  
<textarea type="text" placeholder="Required Field" required 
    class="form-control" id="secid" 
    rows="1" cols="20" wrap="off" 
    style="overflow: hidden; resize: horizontal"> 
</textarea> 
</div>

您可能需要设置字体的家人的，因为textarea默认使用等宽字体。

这样做的主要问题是textarea元素仍然是一个多行元素：用户可以输入多行，只是最后一行在框中可见。您需要一些JavaScript来阻止这种情况（通过捕获任何可能为内容添加换行符的事件）。

来源

2014-10-08 11:30:50

如何使用textarea作为输入？

回答

相关问题