如何在用户点击时将简单文本框转换为文本区域。我正在使用EXT JS。
答案 0 :(得分:5)
你是为了视觉外观吗?或者是否有将其从输入转换为textarea的正当理由?
如果您只是为了它的视觉效果而做,那么只需设置textarea的高度就可以获得很长的路径,并且在焦点事件中增加高度。
Ext.onReady(function(){
new Ext.form.TextArea({
renderTo: Ext.getBody(),
name: 'myTextArea',
width: 200,
height: 22,
listeners: {
focus: function(textarea){
textarea.setHeight(200);
},
blur: function(textarea){
textarea.setHeight(22);
}
}
});
});
编辑:这些已停止工作:
在此处试试:http://jsfiddle.net/chrisramakers/9FjGv/2/
你甚至可以很容易地为它制作一些额外花哨的幻想。
http://jsfiddle.net/chrisramakers/9FjGv/3/
答案 1 :(得分:2)
您无法将文本框更改为textarea,因为它们是两种不同类型的元素。但是,您可以隐藏一个并显示另一个。
<input type='text' id='myTextBox' />
<textarea id='myTextArea' />
有一些功能可以在你想要的任何事件上交换它们:
function swapTexts() {
var tb = document.getElementById('myTextBox');
var ta = document.getElementById('myTextArea');
if (tb.style.display !== 'none') {
tb.style.display = 'none';
ta.style.display = '';
} else {
tb.style.display = '';
ta.style.display = 'none';
}
}
答案 2 :(得分:2)
显示和隐藏是很好的技术。但是,你可以像这样使用innerHTML属性......
<div id='test'> <input type="text" name="text1" id="text1" onclick="test()"/></div>
<script type="text/javascript">
function test()
{
document.getElementById('test').innerHTML = "<textarea></textarea>"
}
</script>
如果你想再次改变,给出一些条件或任何事件......这可能对你有所帮助..
度过美好的一天.....
答案 3 :(得分:1)
您可以在同一个div(或表格)中对TextBox
和TextArea
分别设置两个控件,然后点击TextArea
TextBox
<input type='text' onclick='document.getElementById("txtArId").style.display = ""' />
<TextArea id='txtArId' />
答案 4 :(得分:0)
这是用jQuery完成的示例。
HTML:
<tr>
<td>
<input name="textInputComment" type="text" value="">
<textarea name="textAreaComment" style="display: none;"></textarea>
</td>
</tr>
jQuery:
$(document).ready(function()
$(document).on('focusin', 'input[name=textInputComment]', function () {
$(this).hide();
textarea = $(this).closest('tr').find('textarea[name=textAreaComment]');
textarea.show().focus().val($(this).val());//show, focus and get value from input
});
$(document).on('focusout', 'textarea[name=textAreaComment]', function () {
$(this).hide();
textarea = $(this).closest('tr').find('input[name=textInputComment]');
textarea.show().val($(this).val());//get value from textarea
});
});