使用jQuery修改页面背景色后自动恢复默认的问题求助

问题根源 #

你的按钮是type="submit"类型，点击时会触发表单的默认提交行为——页面会刷新，导致刚设置的背景色被重置回初始状态。

两种解决方法 #

方法1：阻止表单默认提交行为

在jQuery的点击事件中添加event.preventDefault()，取消表单提交的默认动作：

$(document).ready(function () {
  $("#btn1").click(function (event) {
    event.preventDefault(); // 阻止表单提交刷新页面
    $('body').css("background-color", $("#name").val());
  });
});

方法2：修改按钮类型

把按钮的type从submit改成button，这样点击按钮不会触发表单提交，原JS代码无需修改：

<button id="btn1" type="button">Change</button>

额外优化（可选） #

可以给输入框加简单的合法性校验，确保用户输入的是有效的十六进制颜色：

$(document).ready(function () {
  $("#btn1").click(function (event) {
    event.preventDefault();
    const colorVal = $("#name").val().trim();
    // 验证十六进制颜色格式
    const hexColorRegex = /^#([0-9A-F]{3}){1,2}$/i;
    if (hexColorRegex.test(colorVal)) {
      $('body').css("background-color", colorVal);
    } else {
      alert("请输入有效的十六进制颜色码（如#FFFFFF）");
    }
  });
});

内容的提问来源于stack exchange，提问作者Pranjal S Choubey