在输入数据时,将文本字段更改为文本区域,然后在用户切换标签或单击文本区域外部时将其恢复为文本字段,是否可能?
.testInput:focus
{
height: 500px;
}
HTML:
<textarea id="text" class="testInput"> </textarea>
input {
height:50px;
}
input:focus {
height:200px;
}
<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();
})
});
试一下
$('input[size="100"]').each(function () {
var style = $(this).attr('style'),
textbox = $(document.createElement('textarea')).attr('style', style);
$(this).replaceWith(textbox);
});
尝试使用原生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);
contenteditable
- Pranav C Balan