在网页开发中，经常需要把后端返回或者前端生成的字符串赋值给HTML文本输入框，当字符串包含空格时，很容易出现赋值后空格丢失、内容不完整的问题，这会影响表单数据的准确性。
常见问题场景
很多开发者会直接通过拼接字符串的方式给输入框赋值，比如下面的错误示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>错误赋值示例</title>
</head>
<body>
<input type="text" id="testInput">
<script>
// 错误示例：字符串拼接时未正确处理空格
var str = "hello world";
document.getElementById("testInput").outerHTML = "<input type='text' value=" + str + ">";
</script>
</body>
</html>
上面的代码中，字符串hello world包含空格，拼接后生成的value属性只会取到hello，空格和后面的world会被当作其他属性处理，导致赋值不完整。
正确的赋值方法
方法一：使用value属性直接赋值
这是最推荐的方式，直接操作输入框的value属性，不需要处理HTML属性拼接的问题，空格会被完整保留。
// 获取输入框元素
var inputElement = document.getElementById("testInput");
// 包含空格的字符串
var content = " 前端 开发 教程 ";
// 直接赋值给value属性
inputElement.value = content;
这种方式无论字符串开头、中间、结尾有多少空格，都会被完整赋值到输入框中，不会出现丢失的情况。
方法二：通过setAttribute方法赋值
如果需要用setAttribute方法设置value属性，只要保证传入的字符串是完整的，同样可以保留空格。
var inputElement = document.getElementById("testInput");
var content = "HTML 输入框 赋值";
// 使用setAttribute设置value
inputElement.setAttribute("value", content);
方法三：动态生成输入框时正确处理属性
如果是动态创建输入框并赋值，需要给value属性的值加上引号，避免空格导致属性截断。
// 创建input元素
var newInput = document.createElement("input");
newInput.type = "text";
// 直接设置value属性，不需要拼接HTML字符串
newInput.value = "动态 生成 输入框";
// 添加到页面
document.body.appendChild(newInput);
如果必须使用innerHTML或者outerHTML拼接字符串生成输入框，需要给value的值加上双引号，并且对字符串中的双引号进行转义：
var str = "包含 空格 的内容"; // 拼接时给value值加双引号，字符串内的双引号转义 var inputHtml = "<input type='text' value="" + str + "">"; document.body.innerHTML += inputHtml;
注意事项
- 不要直接拼接未加引号的字符串到HTML属性中，空格会导致属性值截断。
- 如果字符串中包含双引号，需要先转义为
"，避免破坏HTML结构。 - 优先使用
element.value的方式赋值，比操作HTML字符串更可靠，也不容易出错。
验证方式
赋值完成后，可以通过打印输入框的value属性验证内容是否完整：
var inputElement = document.getElementById("testInput");
console.log(inputElement.value); // 输出完整的包含空格的字符串
HTMLinput_value字符串赋值空格处理修改时间：2026-07-07 10:42:22