CODEWITHSUNDEEP
javascriptjquery
owen
owen

Reputation: 147

Can you change a text input to textarea?

Is it possible to change a text field to a textarea while entering data and then have it revert back to a text field once the user tabs of clicks outside of the textarea?

Upvotes: 5

Views: 6240

Answers (5)

user11816550
user11816550

Reputation: 1

Try this using vanilla JS. ( input to textarea copying all input attributes )

let input_el = document.querySelector('input[id="inputName"]');
let textarea_el = document.createElement('textarea');
input_el.getAttributeNames().forEach( attrName => {
    textarea_el.setAttribute( attrName, 
      (document.createAttribute( attrName ).value =            
       input_el.getAttribute( attrName ) )
    );
});
textarea_el.setAttribute('rows', '1');
input_el.replaceWith(textarea_el);

Upvotes: 0

Jesper Højer
Jesper Højer

Reputation: 3192

The best solution would be to do it in the css. Something like this:

CSS:

.testInput:focus
{
  height: 500px;
}

HTML:

<textarea id="text" class="testInput"> </textarea>

See working fiddle https://jsfiddle.net/Lk1a5wyh/

Upvotes: 6

Azhar Ansari
Azhar Ansari

Reputation: 104

Try This

$('input[size="100"]').each(function () {
var style = $(this).attr('style'),
    textbox = $(document.createElement('textarea')).attr('style', style);
$(this).replaceWith(textbox);

});

Upvotes: 0

helgeheldre
helgeheldre

Reputation: 1101

What you should ask yourself is "Why?".

You should manipulate size, look and feel through CSS and not with types of elements.

For usability, accessibility and plain understanding what is going on you really should avoid doing stuff like that.

Edit: Just add css classes something like this: 

input {
    height:50px; 
}

input:focus {
    height:200px; 
}

Upvotes: 2

Gaurav Kalyan
Gaurav Kalyan

Reputation: 1897

You could use hidden textarea for this functionality:

HTML Code:

<textarea id="text" style="display:none"> </textarea>
<input id="input1"></input>

Javascript Code:

$(document).ready(function() {
  $('#input1').focus(function() {
    $('#text').show();
    $("#input1").hide();
    $("#text").focus();
  });
  $('#text').blur(function() {
    var val1 = $(this).val();
    $("#input1").val(val1);
    $(this).hide();
    $("#input1").show();
  })
});

Jsfiddle Example

Upvotes: 1

Related Questions