How to make a <input> tag multi line?

I would like to know if is possible to make a <input> tag with appearance like multi-line (similar to the <TEXTAREA></TEXTAREA>) using CSS or an开发者_Go百科other option, unfortunately I can replace the tag with in my web application.

   <input id="uxMessage" validation="required" name="uxMessage" type="text" />

Many Thanks

<input type="text" /> will always only be one line; You cannot force a multiple line behavior with CSS or JavaScript. You will need to use a <textarea> instead of a <input>.

You could use jQuery and it's .replaceWith() method to replace the targeted <input> with a <textarea>. however this has obvious caveats, such as those who visit your page without JavaScript on.

Example:

<input id="uxMessage" validation="required" name="uxMessage" type="text" />

$("#uxMessage").replaceWith('<textarea id="uxMessage" name="uxMessage"></textarea>');

Not without some pretty hefty Javascript, Textarea is the only multi-line text input that I know of.

Edit

Something like this might work with jQuery:

var textArea = jQuery('<textarea />').attr({'id': 'uxMessage', 'name': 'uxMessage'});
jQuery('#uxMessage').replaceWith(textArea);

for the fields i wanted multiline, i set the input type="textarea".

then, i've run the following script at end of body:

    <script>
        $('input[type="textarea"]').each(function(index) {
            var elem = $(this);
            elem.replaceWith($('<textarea/>').attr('name', elem.attr('name')).val(elem.val()));
        });
    </script>

it may not work, so selecting by a class should be better. it doesn't work with jquery slim.

hope this may help you.