Question

我希望能够使用<input>字段类型的控件，但只允许两行。

目前我正在使用两个字段但是想知道是否有人能够提出允许输入的解决方案（类似于textarea）但不超过两行。我控制了场地的宽度等。

作为参考，加载了Jquery和Bootstrap 3。

任何帮助都非常感激。

Answer 1

有两种想法：

您可以使用<textarea>代替，并使用一些只允许两行的脚本来扩充它。
您可以继续使用两个<input>字段，但要将它们设置为相互叠加以创建一个字段的错觉。您可能仍需要一些脚本来处理一些可用性烦恼，例如按ENTER键从第一行到第二行。

Answer 2

试试这个

＆＃13;

var element = document.getElementById('tworows');

make2Lines(element);

function make2Lines(el){
  
  el.setAttribute('rows', 2); // limit height to 2 rows
  // el.setAttribute('wrap', 'off'); // ensure no softwrap is not required anymore if we limit the length
  el.addEventListener('keydown', limit); // add listener everytime a key is pressed
  
  function limit(e){
    if(e.keyCode == 13 && this.value.indexOf('\n')>-1){
      // 13 is the ENTER key and \n is the value it make in the textarea
      // so if we already have a line break and it's the ENTER key, we prevent it
      e.preventDefault();
    }

    // async to let the dom update before changin the value
    setTimeout(limitRow.bind(this), 0);
  }
  
  function limitRow(){
    var maxLength = 10;
    var rows = this.value.split('\n');
    rows.forEach(cutOverflow)
    this.value = rows.join('\n');

    function cutOverflow(row, index, rows) {
      rows[index] = row.substring(0, maxLength);
      // this if is only if you want to automatically jump to the next line
      if (index === 0 && row.length > maxLength)
        rows[1] = row.substring(maxLength) + (rows[1] || '');
    }
  }
}

＆＃13;

<textarea id="tworows"></textarea>

＆＃13;

简短版本：function make2Lines(a){function b(a){13==a.keyCode&&this.value.indexOf("\n")>-1&&a.preventDefault(),setTimeout(c.bind(this),0)}function c(){function c(b,c,d){d[c]=b.substring(0,a),0===c&&b.length>a&&(d[1]=b.substring(a)+(d[1]||""))}var a=10,b=this.value.split("\n");b.forEach(c),this.value=b.join("\n")}a.setAttribute("rows",2),a.addEventListener("keydown",b)}

Answer 3

如果你在谈论文本太长时包装行，根据文档<input type="text">无法包装文本。但是，如果您正在讨论限制字符长度，可以使用maxlength属性，如<input type="text" maxlength="10">

Answer 4

输入字段只能显示一行http://www.w3.org/TR/html-markup/input.text.html#input.text。对于多行，您需要使用textarea并设置rows属性。如果你需要两个单独的值，你可以用PHP，Javascript或其他方式完成它。

<textarea class="form-control" rows="2">The default text or empty for nothing this is passed as value for this field</textarea>

如何创建跨越两行的输入字段（HTML）

4 个答案: