如何使用 jquery 在 input type="text" 和 textarea 之间切换

Posted 2023-05-07

【中文标题】如何使用 jquery 在 input type="text" 和 textarea 之间切换

【英文标题】：how to switch between input type="text" and textarea using jquery

【发布时间】：2013-04-02 19:52:32

【问题描述】：

请帮助我处理此代码或使用 jquery 在 input type="text" 和 textarea 之间切换的其他工作代码。

$(function()
$("a#change").toggle(function()
  var input = document.getElementById('text'),
  textarea  = document.createElement('textarea');
  textarea.id    = input.id;
  textarea.cols  = 40;
  textarea.rows  = 5;
  textarea.value = input.value;
  input.parentNode.replaceChild(textarea,input);
  return false;
,function()
  textarea.parentNode.replaceChild(input,textarea);
  return false;
);

);

<input type="text" name="text" id="text" /><a href="#" id="change">change</a>

【问题讨论】：

你能给我们看看 html 吗？您可能需要检测textarea 所在的节点编号，然后用input 字段替换该节点索引。它们是不同类型的元素，因此您需要捕获要传输的数据，然后用新元素重写元素位置。

您的第二个函数正在尝试访问未定义的textarea 变量。

***.com/questions/2382289/…的可能副本

您使用的是什么版本的 jQuery？以这种方式使用.toggle() 不再有效（1.8 版本已弃用，1.9 版本已删除）。

更改

【参考方案1】：

以下内容应该适合您。

var textbox = $("#textbox");
var textarea = $("<textarea id='textarea'></textarea>");
$("#change").click(function () 
    //Check for textbox or textarea
    if ($("#textbox").length === 1) 
        //Copy value to textarea
        textarea.val(textbox.val());
        //Replace textbox with textarea
        textbox = textbox.replaceWith(textarea);
     else 
        //Copy value to textbox
        textbox.val(textarea.val());
        //Replace textarea with textbox
        textarea = textarea.replaceWith(textbox);
    
);

您可以根据需要设置第二行中的列和行。

jsFiddle