为input元素设置默认值是前端开发中的基础操作，但不同场景下实现方式不同，核心是使用value属性或框架对应的初始值机制。
input默认值设置方法：基础与进阶
在HTML中，input标签的value属性直接定义了默认值，对于文本输入框，设置value=”默认文字”即可，对于单选和多选按钮，checked属性控制默认选中状态，value指定提交值，页面加载时,这些默认值会直接显示在表单中。
原生HTML默认值设置
- 文本输入：
- 复选框：（默认选中）
- 数字输入：
- 日期输入：
- 隐藏域：
- 颜色选择器：
- 范围滑块：
需要注意的是，value的值必须是字符串，浏览器会解析为合适的类型，对于
使用placeholder作为提示并非默认值
很多开发者会用placeholder来模拟默认值，但placeholder只在用户未输入时显示灰色提示，输入后消失，且不会随表单提交，如果需要在提交时包含默认值，必须使用value属性，举个例子，如果你在搜索框用了placeholder=”搜索”，用户不输入直接提交，搜索框的内容是空的，而不是”搜索”，默认值必须用value，如果你需要既显示提示又能提交，可以在value中放默认值,配合placeholder做额外说明。
input默认值与placeholder的区别
这是新手最容易混淆的概念，value是真正的默认值，placeholder是占位提示,它们的表现和用途完全不同。
| 特性 | value | placeholder |
|---|---|---|
| 提交时发送 | 是 | 否 |
| 用户修改后覆盖 | 是 | 自动消失 |
| 样式控制 | 默认文本样式 | 灰色，可自定义 |
| 用途 | 预填默认数据 | 提示输入格式 |
| 可被JavaScript读取 | 通过element.value | 通过element.placeholder |
| 对表单验证的影响 | 作为实际值参与验证 | 不影响验证 |
如果你想要在用户未输入时显示预设内容，并且用户可以修改，用value，如果你只是想提示用户该输入什么，用placeholder，两者可以同时使用，但要注意视觉上的优先级，比如登录表单，既可以用value预填用户名,又用placeholder提示密码格式。
通过JavaScript动态设置input默认值
在实际项目中，默认值往往需要根据后端数据动态生成,这时你需要用JavaScript操作DOM。
直接修改value属性
获取元素后直接赋值：document.getElementById(‘input’).value = ‘新值’，这是最直接的方法，适用于任何HTML元素，推荐使用id或class选择器，确保元素唯一，如果使用jQuery，可以用$(‘#input’).val(‘新值’)。
利用defaultValue属性实现重置
每个input元素都有defaultValue属性，它保存了HTML中value属性的初始值，当你需要表单重置到初始状态时,可以这样操作：
const input = document.getElementById('input');
input.value = input.defaultValue;
这样可以避免重新加载页面，比调用form.reset()更可控，reset()方法会重置所有表单控件，而defaultValue可以针对单个控件，如果一个字段的默认值被JS修改过，reset会回到HTML中定义的初始值,而不是JS修改后的值。
批量设置默认值
如果表单有很多字段，可以遍历表单元素,根据name或id设置默认值。
const form = document.getElementById('myForm');
const defaults = { username: 'admin', role: 'user' };
Array.from(form.elements).forEach(el => {
if (el.name in defaults) {
el.value = defaults[el.name];
}
});
这样便于从API获取默认值对象后快速填充，对于checkbox和radio,还需要设置checked属性。
动态默认值的事件处理
设置默认值后，有时需要触发change或input事件，以便其他逻辑响应,可以手动分发事件：
input.value = '新值';
input.dispatchEvent(new Event('input', { bubbles: true }));
input.dispatchEvent(new Event('change', { bubbles: true }));
这在Vue或React等框架中尤其重要,因为框架通常依赖这些事件来更新状态。
form表单input默认值重置技巧
在用户填写表单后，可能需要重置到默认值,这里有几个实用技巧。
使用表单的reset方法
原生form对象有reset()方法，调用后所有表单控件会重置为HTML中定义的初始值，注意，它只会重置到初始HTML中的值，不会重置JavaScript设置的值，如果你在页面加载后通过JS修改了value，reset会回到HTML中定义的默认值，而不是JS修改后的值，这一点在实际开发中经常被忽略,导致重置不符合预期。
手动重置到动态默认值
如果默认值是通过JavaScript设置的，你需要手动保存这些值，常见做法是将默认值存储在JavaScript对象中,重置时遍历表单元素赋值。
const initialValues = { username: '默认用户', email: 'default@example.com' };
function resetForm() {
for (const [name, value] of Object.entries(initialValues)) {
form.elements[name].value = value;
}
}
这种方法灵活，但需要维护一个初始值对象,也可以使用深拷贝保存整个表单数据。
使用dataset保存默认值
可以在input标签上添加自定义属性，如data-default=”初始值”，然后通过element.dataset.default读取并重置，这样既保留了默认值,又不影响页面结构。
<input type="text" id="username" data-default="默认用户">
document.getElementById('username').value = document.getElementById('username').dataset.default;
这种方式对于表单中包含多个动态默认值的情况非常实用,而且不需要额外的全局变量。
保留部分字段不重置
有时重置时希望保留某些字段的值，比如用户已经选择的选项，可以给这些字段添加一个标记,重置时跳过它们。
function resetForm() {
Array.from(form.elements).forEach(el => {
if (!el.dataset.keep) {
el.value = el.defaultValue || el.dataset.default;
}
});
}
vue框架中input默认值绑定实践
在Vue中，使用v-model进行双向绑定时,默认值由data中的初始值决定。
data() {
return {
username: '默认用户'
}
}
模板中的会自动显示”默认用户”，如果你只需要初始值而后续不响应，可以使用:value绑定。
Vue2与Vue3的默认值设置
Vue2中，data选项返回对象；Vue3中使用Composition API,通过ref或reactive定义初始值。
// Vue3
import { ref, reactive } from 'vue';
const username = ref('默认用户');
const form = reactive({ email: 'default@example.com' });
模板中同样使用v-model，重置时，直接将ref.value或reactive对象重置为初始值。
Vue中的重置操作
重置时，只需将data中的值重新赋为初始值即可，可以将初始值定义在data中,或者使用computed保存初始状态。
data() {
return {
form: { username: '默认用户', email: 'default@example.com' },
initialForm: null
};
},
created() {
this.initialForm = JSON.parse(JSON.stringify(this.form));
},
methods: {
resetForm() {
this.form = JSON.parse(JSON.stringify(this.initialForm));
}
}
这样可以保证重置到真正的初始状态,即使初始值在后续被修改过。
React中input默认值设置对比
React中，非受控组件使用defaultValue，受控组件使用state初始值,选择哪种取决于数据控制需求。
// 非受控（简单场景）
<input defaultValue="默认内容" />
// 受控（数据需实时管理）
const [value, setValue] = useState('默认内容');
<input value={value} onChange={e => setValue(e.target.value)} />
受控组件的初始值即为state的初始值，重置时调用setState恢复初始值即可，对于复杂表单，推荐使用受控组件，便于数据验证和提交，非受控组件的defaultValue仅在首次渲染时生效,后续更新不会改变输入框的值。
input默认值设置常见问题
input默认值value怎么设置才不会随用户输入改变？
默认值本身不会改变，value属性记录的是初始值，用户输入改变的是input的value属性，但defaultValue属性保持不变，如果需要引用初始值，使用defaultValue，如果你希望用户输入后仍能获取初始值，可以将初始值存储在其他变量中，比如data属性或JavaScript变量，对于受控组件，初始值保存在state中,始终可以访问。
checkbox默认值怎么设置？
checkbox的默认值分为选中状态和提交值，使用checked属性设置默认选中，value属性设置提交的值，如果默认选中，checked=”checked”；如果默认不选中，不写checked即可，注意，checkbox的value在提交时，只有选中状态才会发送，如果默认选中，用户取消选中后，提交时不会发送该字段，如果你需要在提交时始终发送该字段,可以使用隐藏域配合checkbox。
如何重置input到初始默认值且不刷新页面？
使用form.reset()方法，或者通过JavaScript将input.value设置为input.defaultValue，这样不需要刷新页面，即可恢复到初始状态，对于动态设置的值，需要手动保存并恢复，推荐在页面加载时保存一份初始值快照，重置时恢复，对于框架,利用对应的状态管理机制重置即可。
根据具体场景选择合适的方法，即可轻松实现input默认值的设置与重置,确保表单交互符合预期。
首发原创文章，作者：王坚，如若转载，请注明出处：https://idctop.com/input%e8%ae%be%e7%bd%ae%e9%bb%98%e8%ae%a4%e5%80%bc%e6%80%8e%e4%b9%88%e5%81%9a%ef%bc%9f%ef%bc%8c%e6%9c%89%e5%93%aa%e4%ba%9b%e6%ad%a5%e9%aa%a4/
