在 jQuery 中设置输入值

使用 jQuery 的 val() 方法，可以设置输入框的值、读取当前值，或根据旧值生成新值。选中目标输入框后，调用 .val("new value") 即可更新其值。下方示例展示了设置值、使用回调、读取值，以及避免常见错误时需要检查的事项。

使用 .val() 设置输入框的值

在 jQuery 选择结果上调用 .val(value)，会为所有匹配的元素设置该值。例如，$("#email").val("reader@example.com") 会将 ID 为 email 的输入框设为指定值。请将选择器和字符串替换为页面实际使用的内容。类选择器（例如 $(".email")）可能匹配多个输入框，因此只有在确实要设置所有匹配字段时才使用它。

调用时，元素必须已经存在。可以将调用放入就绪处理程序，例如 $(function () { ... })，也可以在相关表单标记之后加载脚本。如果选择器没有匹配到元素，就不会有任何内容被更新；值看起来没有变化时，请检查选择器以及元素的 ID 或类名。

使用回调更新输入框的值

如果新值取决于每个输入框的当前值，可以向 .val() 传入函数。jQuery 会针对每个匹配元素调用该函数，并将元素从零开始的位置索引和当前值作为参数传入。请返回要设置的值；这些参数是回调的输入，并不会自动成为回调的返回值。这种方式适合转换多个字段，无需分开读取和设置。

例如，下面的回调逻辑会根据当前值返回大写文本。这是一个独立的 JavaScript 转换示例；在页面中，应将该回调传给所选输入框上的 .val()：

本节中的代码以及显示的标签或输出仍为英文。

function uppercaseValue(index, currentValue) {
  return currentValue.toUpperCase();
}

const updatedValue = uppercaseValue(0, "delft");

要保留常见的失焦时转为大写的行为，可以绑定失焦处理程序，并在其中使用 $(this).val(function (index, currentValue) { return currentValue.toUpperCase(); })。用户离开输入框时，回调返回的字符串会替换该输入框的值。如果不需要索引，可以省略 index 参数。

使用 .val() 读取输入框的值

不带参数调用 .val()，会读取选择结果中第一个元素的值。例如，const email = $("#email").val(); 会保存当前值，供代码检查或在其他地方使用。如果选择器匹配多个元素，取值方法仍然只读取第一个元素；需要获取每个值时，请逐个处理元素。

从输入框读取的值是字符串。如果后续逻辑需要数字，请显式转换，并考虑用户实际输入的文本。读取到的是字段当前的值，它可能与页面加载时不同。

设置输入框值时的常见检查

• **确认选择器：**检查 ID、类名或其他选择器是否匹配目标输入框。若选择器匹配多个字段，它们都会被更新。
• **检查调用时机：**等输入框存在后再设置值，例如在 jQuery 就绪处理程序中调用，或在表单标记之后调用。
• **检查值的来源：**使用回调时，请返回转换后的字符串。回调接收的参数依次是元素索引和当前值。
• **单独处理事件：**使用 .val() 设置值本身不会触发 change 事件。如果其他代码需要响应这次程序化更新，请在设置值后显式触发所需事件，例如调用 .trigger("change")。
• 区分显示与提交：.val() 会更改控件当前的值，但不会更新页面上无关的文本，也不能保证该字段会包含在表单提交中。需要确认提交行为时，请检查输入框是否已启用并且属于该表单。