文本框间传递文本时出现的jQuery异常行为

问题根源 #

这不是jQuery .val() 方法的问题，.val() 完全能正确获取带空格的内容。问题出在你手动拼接HTML字符串的方式上：当值包含空格时，浏览器会把空格后的内容误解析成新的HTML属性（比如你例子里的this=""），本质是没有对属性值里的特殊字符做转义处理。

正确解决办法 #

别再手动拼HTML字符串了，用jQuery的DOM创建方法自动处理转义，两种常用方式：

方式1：通过jQuery构造器直接定义属性 #

// 生成input元素并配置所有属性
var newInput = $('<input>', {
  class: 'story',
  id: 'q3',
  type: 'text',
  value: $('#storytxt').val()
});
// 把生成的元素添加到页面目标位置，比如某个容器
$('#your-container').append(newInput);

方式2：先创建元素再单独设值 #

如果习惯先写基础HTML结构，也可以先创建元素，再用.val()赋值：

// 创建基础input元素
var newInput = $('<input class="story" id="q3" type="text">');
// 用jQuery的val方法设置值，自动处理转义
newInput.val($('#storytxt').val());
// 添加到页面
$('#your-container').append(newInput);

为什么错误写法会出问题？ #

你之前的拼接逻辑，当#storytxt的值是Test this时，拼出来的字符串是：

<input class="story" id="q3" type="text" value="Test this">

浏览器解析时会把value="Test"当成一个完整属性，剩下的this"会被解析成this=""这个无效属性，这是HTML解析规则导致的。手动拼接HTML很容易遇到这类字符转义问题，用DOM方法创建元素能彻底避免。

内容的提问来源于stack exchange，提问作者Carl Bruiners