如何将文本框更改为textarea

Question

我正在使用以下代码从下拉列表到文本框选择字体系列。 现在，我想使用textarea代替文本框。 我怎样才能做到这一点？

<HTML>
<head>


<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>


<script>
$(function () {
    $('select[name="font"]').on('change', function () {
        $('input[name="text1"]').css('font-family', this.value);
    });
});
</script>
</head>



<body>
Select Programming font:
<select name="font">
    <option value="arial">arial black</option>
    <option value="tohma">tahoma</option>
    <option value="times new roman">times new roman</option>
    <option value="calibri">calibri</option>
</select>



<br>EnterValue:
 <input type="text" name="text1" value="Font Family">

</body>
</html>

我试过了

Answer 1

你可以改变：

<input type="text" name="text1" value="Font Family" />

至：

<textarea>Font Family</textarea>

然后使用：

$('textarea').css('font-family', this.value);

代替：

$('input[name="text1"]').css('font-family', this.value);

小提琴演示

Answer 2

尝试，

<textarea name="text1" id="text1">Font Family</textarea>

Answer 3

<input id="text-input" type="text" name="text1" value="Font Family">

var value = $('#text-input').val();
$('#text-input').replace('<textarea id="text-input" name="text1"></textarea >');
$('#text-input').val(value);

Answer 4

您可以使用replaceWith方法将输入框更改为texarea，如下所示：

$('input[name="text1"]').replaceWith('<textarea />');

Answer 5

尝试这样的事情

function t2t( el ) {
    var element = document.getElementById( el.id );
  var parent = element.parentNode;
  parent.removeChild( element );
  parent.innerHTML = element.type == 'text' ? '<textarea id="' + element.id + '" cols=50 rows=5>' + element.value +'</textarea>' : '<input type="text" id="' + element.id + '"  value="' + element.value + '" />';
}

如何将文本框更改为textarea

问题描述

5 个解决方案

解决方案1
0 已采纳 2014-03-04 07:14:47

解决方案2
0 2014-03-04 07:16:29

解决方案3
0 2014-03-04 07:18:29

解决方案4
0 2014-03-04 07:19:11

解决方案5
0 2014-03-04 07:20:09

如何将文本框更改为textarea

问题描述

5 个解决方案

解决方案1 0 已采纳 2014-03-04 07:14:47

解决方案2 0 2014-03-04 07:16:29

解决方案3 0 2014-03-04 07:18:29

解决方案4 0 2014-03-04 07:19:11

解决方案5 0 2014-03-04 07:20:09

解决方案1
0 已采纳 2014-03-04 07:14:47

解决方案2
0 2014-03-04 07:16:29

解决方案3
0 2014-03-04 07:18:29

解决方案4
0 2014-03-04 07:19:11

解决方案5
0 2014-03-04 07:20:09