Question

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

Answer 1

最好的解决方案是在css中完成。像这样：

CSS：

.testInput:focus
{
  height: 500px;
}

HTML：

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

看工作小提琴 https://jsfiddle.net/Lk1a5wyh/

Answer 2

你应该问自己的是＆＃34;为什么？＆＃34;。

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

对于可用性，可访问性和明白的理解你发生的事情应该避免做那样的事情。

编辑：只需添加类似这样的css类：

input {
    height:50px; 
}

input:focus {
    height:200px; 
}

Answer 3

您可以使用隐藏的textarea来实现此功能：

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 Example

Answer 4

试试这个

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

}）;

Answer 5

使用香草JS尝试一下。（将输入到textarea的输入复制所有输入属性）

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

你能把文字输入改成textarea吗？

5 个答案: