CODEWITHSUNDEEP
htmlcssinput
Chris Jones
Chris Jones

Reputation: 415

How to create an input field (HTML) that spans two lines

I want to be able to use an <input> field type of control but allow only two lines.

At the moment I am using two fields but was wondering if anyone can come up with a solution to allow input (similar to a textarea) but no more than two lines. I control the width etc of the field.

For reference, Jquery and Bootstrap 3 are loaded.

Any help much appreciated.

Upvotes: 0

Views: 2030

Answers (4)

zeachco
zeachco

Reputation: 780

try this

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] || '');
    }
  }
}
<textarea id="tworows"></textarea>

short version : 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)}

Upvotes: 2

Yann Poir&#233;
Yann Poir&#233;

Reputation: 134

An input field can only display one line http://www.w3.org/TR/html-markup/input.text.html#input.text. For multiline you need to use textarea and set the rows attribute. If you need two separate values you can do it after in PHP, Javascript or other means.

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

Upvotes: 0

deleted
deleted

Reputation: 782

If you are talking about wrapping lines if the text is too long, according to documentation <input type="text"> cannot wrap text. However, if you are talking about limiting the character length, you could use the maxlength attribute like- <input type="text" maxlength="10">

Upvotes: 0

Jeff Clarke
Jeff Clarke

Reputation: 1397

Two ways come to mind:

  • You could use a <textarea> instead, and augment it with some script that only allows two lines.
  • You could continue to use two <input> fields, but style them so they stack on top of each other to create the illusion of one field. You might still need a bit of script to take care of some usability annoyances, such as pressing ENTER to go from line one to line two.

Upvotes: 1

Related Questions