Automatic height setting for input tag

I'm having a dynamic input box, heigth of which need to be increaed based on the data adding. I tried to put new line after 10 characters in javascript but its not reflecting in input tag.

My code is

for(var i=0; i < field.length; i++)
  cityNameLength = cityNames.length;
  tempLength = cityNameLength;开发者_运维知识库
  if(tempLength > 12)
  {
    tempLength = 0;
    cityNames+='\r\n';
  }
}
document.getElementById('val').value =cityNames ; // it is displaying everything in one line

and

<input type="text" id="val"/>

For Multi Line you should use textarea tag.