如何预填充表单字段值？页面加载时赋值操作无效问题

核心问题说明 #

表单输入类字段（如<input>、<textarea>）必须用.val()赋值，.text()仅适用于普通文本元素（如<div>、<p>），所以你之前用.text()的方式本身就不对。而.val()无效，大概率是以下几个原因导致：

可能的原因及解决方法 #

• 选择器未命中目标元素
  检查目标表单字段的id是否确实是form-text，有没有拼写错误、大小写问题。可以在浏览器控制台执行console.log($('#form-text'))，如果返回的jQuery对象长度为0，说明元素不存在或选择器错误。

• 代码执行时机过早
  如果你的代码在DOM元素还未加载完成时就执行，会找不到目标元素。必须确保代码在DOM就绪后运行：

  $(document).ready(function() {
    var name = "test";
    $('#form-text').val(name);
  });
  

  或者把你的<script>标签放在页面的</body>闭合标签之前，确保DOM已加载完毕。

• 元素类型不符
  确认目标元素是表单输入控件（如<input type="text" id="form-text">、<textarea id="form-text"></textarea>），如果是其他类型元素，比如<span id="form-text">，才需要用.text()，但这不属于表单字段范畴。

• 其他代码覆盖了值
  检查页面是否有其他脚本在后续执行了清空字段、重置表单的操作，比如$('#form-text').val('')或者form.reset()，这类操作会覆盖你设置的值。

备选方案（原生JS） #

如果怀疑jQuery有问题，可以尝试用原生JavaScript实现，避免依赖库的影响：

document.addEventListener('DOMContentLoaded', function() {
  var name = "test";
  var inputElement = document.getElementById('form-text');
  if (inputElement) {
    inputElement.value = name;
  }
});

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