你能将文本输入框改为文本域吗？

Question

在输入数据时，将文本字段更改为文本区域，然后在用户切换标签或单击文本区域外部时将其恢复为文本字段，是否可能？

- owen

---

contenteditable - Pranav C Balan

是的，但我发现这是一件非常不寻常的事情...为什么不最初使用具有小高度的文本区域，看起来像文本字段，然后在单击时增加其高度，看起来像文本区域..这将更可行.. - Gaurav Aggarwal

Answer 1

最好的解决方案是在css中进行。 例如这样：

CSS:

.testInput:focus
{
  height: 500px;
}

HTML:

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

请查看实际效果 https://jsfiddle.net/Lk1a5wyh/

- Jesper Højer

---

如果用户不能在下一行写入，增加高度的意义是什么？ - Rayon

不客气，您能将其标记为答案吗？这对我来说意义重大 :) - Jesper Højer

将会随着时间的推移。 - owen

我喜欢你的回答，但是我更倾向于在对象上设置CSS类而不是直接设置高度。 - helgeheldre

Answer 2

你需要问自己的是“为什么”。你应该通过CSS来操纵大小、外观和感觉，而不是使用类型元素。为了可用性、可访问性和理解正在发生的事情，你真的应该避免这样做。编辑：只需添加类似于这样的CSS类即可：

input {
    height:50px; 
}

input:focus {
    height:200px; 
}

- helgeheldre

Answer 3

你可以使用隐藏的文本框来实现此功能：

HTML 代码：

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

Javascript 代码：

$(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 示例

- Gaurav Kalyan

Answer 4

试一下

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

});

- Azhar Ansari

Answer 5

尝试使用原生JS实现此功能（将输入框的所有属性复制到文本区域）

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

- user11816550