Javascript 您可以将文本输入更改为textarea吗？

是否可以在输入数据时将文本字段更改为文本区域，然后在用户选项卡在文本区域之外单击时将其恢复为文本字段？

最好的解决方案是在css中执行此操作。 大概是这样的：

CSS:

HTML:

看工作小提琴

---

你应该问自己“为什么？”

您应该通过CSS而不是元素类型来操纵大小、外观和感觉

对于可用性、可访问性和简单理解正在发生的事情，你真的应该避免做这样的事情

编辑： 只需添加如下css类：

input {
    height:50px; 
}

input:focus {
    height:200px; 
}

---

您可以将隐藏文本区域用于此功能：

HTML代码：

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

试试这个

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

---

}))

使用vanilla JS试试这个。（输入到文本区域复制所有输入属性）

---

是的，但我发现这是非常不寻常的事情…为什么不先使用高度很小的textarea，看起来像一个文本字段，然后在单击时增加它的高度，看起来像textarea..这将更可行..如果用户不能在下一行中写入，增加高度有什么意义？不客气，你能把它标记为答案吗，这对我来说意义重大：）一旦时间过去我会喜欢你的答案，但我更喜欢在任务中设置对象的css类，而不是直接设置高度

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

$(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();
  })
});

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

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);