localStorage数组含空格值在input中截断的jQuery问题求助

这问题我太熟了！你看你拼接HTML的时候，value=后面直接跟了memList[m]，但HTML里属性值如果包含空格，必须用引号包裹，不然浏览器会把空格后的内容当成新的HTML属性来解析。

举个例子，当memList[m]是"Steve R."时，你拼出来的HTML会是：

<input type="text" name="memberName" value=Steve R.>

浏览器看到value=Steve后，就会把后面的R.当成一个无效的独立属性，所以input里只会显示空格前的Steve。

快速解决方法 #

给value的值加上双引号就行，修改你的循环代码：

for (m = 0; m < memList.length; m++) { 
  $('.idName[num="' + m + '"]').html('<input type="text" name="memberName" value="' + memList[m] + '">'); 
}

这样拼出来的HTML里value是带引号的：

<input type="text" name="memberName" value="Steve R.">

浏览器就能正确识别整个姓名作为input的初始值了。

更推荐的写法 #

如果你的项目支持ES6+，用模板字符串拼接HTML会更直观，还能避免这类引号遗漏问题：

for (let m = 0; m < memList.length; m++) { 
  $('.idName[num="' + m + '"]').html(`<input type="text" name="memberName" value="${memList[m]}">`); 
}

或者直接用jQuery的val()方法设置值，比直接拼接HTML更安全，也更符合jQuery的使用习惯：

for (let m = 0; m < memList.length; m++) { 
  const $input = $('<input type="text" name="memberName">').val(memList[m]);
  $('.idName[num="' + m + '"]').html($input);
}

内容的提问来源于stack exchange，提问作者Clay Barnard