Question

我有一个文本框，可以作为这样的输入：

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

我需要使这个文本框“可扩展”，因为当用户输入的文本长于文本框的宽度时，他/她应该能够手动放大框。很像textarea标签。我怎么能做到这一点？

Answer 1

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

作为一种变通方法，您可以添加一个使元素可调整大小的脚本。您可以自行设计和实现它，它不可避免地与浏览器调整textarea的内置工具不同。

或者，您可以使用input元素替换textarea元素，并使用适当的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来防止这种情况（通过捕获任何可能为内容添加换行符的事件）。

Answer 2

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

Answer 3

在这里，我是多么强烈建议反对它，因为我们的工作部分是决定何时使用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();
  }
}

警告： focus（）将光标设置在字符串的开头，为了实现光标移动到文本的末尾，您必须清空并重新填充值专注于它。

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

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

如何使用textarea作为输入？

3 个答案: