如何通过JavaScript或jQuery为多个输入框设置默认值？

嘿，我来帮你搞定这个问题！首先得提个关键小问题：你表单里的三个输入框都用了同一个id="id1"，这可不行哦——HTML里id必须是唯一的，不然JS/jQuery定位元素会出各种奇怪的问题。我先把表单调整为带唯一id的版本，顺便修正PHP输出的小细节（要加echo才能把值显示出来）：

<form method="" action="">
  姓名：<input type="text" id="nameInput" value="<?php echo $value; ?>" placeholder="你的姓名"> <br><br>
  姓氏：<input type="text" id="lastNameInput" value="<?php echo $value; ?>" placeholder="你的姓氏"> <br><br>
  邮箱：<input type="text" id="emailInput" value="<?php echo $value; ?>" placeholder="你的邮箱"> <br><br>
</form>

接下来分两种方案给你演示如何设置默认值：

1. 逐个设置不同默认值 #

如果每个输入框的默认内容不一样，直接通过id定位后设置即可，还能兼顾PHP已经输出的值（如果PHP有值就保留，没有就用我们设的默认值）：

// 等页面DOM加载完成再执行代码
document.addEventListener('DOMContentLoaded', function() {
  // 姓名输入框默认值
  document.getElementById('nameInput').value = document.getElementById('nameInput').value || '张三';
  // 姓氏输入框默认值
  document.getElementById('lastNameInput').value = document.getElementById('lastNameInput').value || '李';
  // 邮箱输入框默认值
  document.getElementById('emailInput').value = document.getElementById('emailInput').value || 'example@mail.com';
});

2. 批量设置（适合大量输入框） #

如果要设置默认值的输入框很多，可以给它们加个共同类名，再用data-*属性存各自的默认值，批量处理更高效：

<!-- 给输入框加共同类和默认值属性 -->
<form method="" action="">
  姓名：<input type="text" class="form-input" id="nameInput" value="<?php echo $value; ?>" placeholder="你的姓名" data-default="张三"> <br><br>
  姓氏：<input type="text" class="form-input" id="lastNameInput" value="<?php echo $value; ?>" placeholder="你的姓氏" data-default="李"> <br><br>
  邮箱：<input type="text" class="form-input" id="emailInput" value="<?php echo $value; ?>" placeholder="你的邮箱" data-default="example@mail.com"> <br><br>
</form>

对应的JS代码：

document.addEventListener('DOMContentLoaded', function() {
  // 获取所有带form-input类的输入框
  const inputs = document.querySelectorAll('.form-input');
  inputs.forEach(input => {
    // 用逻辑或判断：原有值为空就用data-default里的内容
    input.value = input.value || input.dataset.default;
  });
});

如果你已经引入了jQuery库，代码会更简洁：

1. 逐个设置 #

// 等待DOM加载完成
$(document).ready(function() {
  $('#nameInput').val($('#nameInput').val() || '张三');
  $('#lastNameInput').val($('#lastNameInput').val() || '李');
  $('#emailInput').val($('#emailInput').val() || 'example@mail.com');
});

2. 批量设置 #

同样利用共同类和data-*属性：

$(document).ready(function() {
  $('.form-input').each(function() {
    const $input = $(this);
    $input.val($input.val() || $input.data('default'));
  });
});

这样不管PHP有没有输出值，都能保证输入框有合理的默认内容啦～

内容的提问来源于stack exchange，提问作者Tomáš Jalč