jQuery 替换input为textarea后如何将value属性值填入文本区域

核心问题原因 #

• input的value分为静态属性(attribute)和动态属性值(property)：你在源码中看到的value是页面初始化时的静态属性，用户输入后更新的是DOM对象的动态value property，用attr("value")只能拿到初始值，拿不到用户输入的最新内容。
• textarea的渲染值不识别标签上的value属性，必须写在<textarea>和</textarea>的闭合标签之间才会正常显示。

最优实现方案（一步完成替换+赋值） #

替换标签时直接把input的当前值填充到textarea内部，不需要分开执行两次操作：

jQuery('.someClass input').replaceWith(function () {
  // 直接取当前input的用户输入值
  const currentValue = this.value;
  // 替换标签的同时把值写入textarea闭合区间
  return this.outerHTML
    .replace("<input", "<textarea")
    .replace("</input", `${currentValue}</textarea`);
});

原有分步写法的修正 #

如果你要保留原有分步执行的逻辑，只要把取值方法从attr("value")换成jQuery的val()方法即可：

// 标签替换逻辑保持不变
jQuery('.someClass input').replaceWith(function () {
  return this.outerHTML.replace("<input", "<textarea").replace("</input", "</textarea")
});
// 用val()获取动态输入的value，不要用attr()
jQuery('.someClass textarea').text(jQuery('.someClass textarea').val());

内容的提问来源于stack exchange，提问作者Andrew Chu