Können Sie eine Texteingabe in Textarea ändern?

Question

Ist es möglich, ein Textfeld während der Eingabe von Daten in ein Textfeld zu ändern und es dann wieder in ein Textfeld zurückzusetzen, sobald die Benutzer-Tabs von Klicks außerhalb des Textfelds sind?

Answer 1

Die beste Lösung wäre, es in der CSS zu tun. Etwas wie folgt aus:

CSS:

.testInput:focus 
{ 
    height: 500px; 
} 

HTML:

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

Siehe Geige Arbeits https://jsfiddle.net/Lk1a5wyh/

Answer 2

Was sollten Sie sich fragen, ist "Warum?".

Sie sollten Größe, Aussehen und Verhalten über CSS und nicht mit Elementtypen manipulieren.

Für Benutzerfreundlichkeit, Zugänglichkeit und einfaches Verständnis, was los ist, sollten Sie wirklich solche Sachen vermeiden.

Edit: nur CSS-Klassen so etwas wie hinzufügen:

input { 
    height:50px; 
} 

input:focus { 
    height:200px; 
} 

Answer 3

Sie versteckte Textfeld für diese Funktionalität nutzen könnten:

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

Answer 4

Try This

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

});