本文讲解如何用 jQuery 捕获用户在文本框中输入的内容，并实时替换 HTML 中指定元素（如 ）的文本，涵盖事件绑定、选择器使用和常见错误修正。

本文讲解如何用 jquery 捕获用户在文本框中输入的内容，并实时替换 html 中指定元素（如 ``）的文本，涵盖事件绑定、选择器使用和常见错误修正。

在 jQuery 初学实践中，一个典型需求是：用户在输入框中填写内容，点击按钮后，将该内容动态插入到页面某处——例如替换 <strong></strong> 标签内的默认文本。但初学者常因事件类型、选择器范围或 DOM 查询时机出错而导致脚本失效。

? 常见错误分析

你原始代码中存在三个关键问题：

• ❌ 错误绑定事件对象：$("#name").on("submit", ...) —— <input type="text"> 元素不触发 submit 事件；submit 是 <form></form> 的事件，而你的 HTML 中甚至没有 <form></form> 标签。
• ❌ 事件类型误用：应监听按钮的 click（或更语义化的 submit 事件，但需包裹在 <form></form> 中），而非文本框的 submit。
• ❌ 选择器逻辑偏差：$(this).val() 在点击按钮时执行，this 指向的是 #submit 按钮（无 value 属性），而非 #name 输入框。

✅ 正确实现方式（推荐方案）

以下为简洁、健壮的 jQuery 实现（无需 <form></form>）：

jQuery 1.12.4

jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

下载

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<section>
  <label for="name">Name</label>
  <input type="text" id="name">
  <input type="button" id="submit" value="Update"> <!-- 推荐用 type="button" 避免意外提交 -->
  <p class="output">Hello <strong>Text that needs to be replaced</strong></p>
</section>

<script>
$(function() {
  $("#submit").on("click", function() {
    const inputValue = $("#name").val().trim(); // 获取并去除首尾空格
    if (inputValue) {
      $("strong").text(inputValue); // 安全更新文本
    } else {
      $("strong").text("Guest"); // 可选：空输入时设默认值
    }
  });
});
</script>

? 小提示：将 <input type="submit"> 改为 <input type="button"> 更合理，避免浏览器尝试提交不存在的表单而刷新页面；若坚持用 type="submit"，建议包裹 <form></form> 并调用 event.preventDefault()。

?️ 进阶建议与注意事项

• 防止 XSS 风险：.text() 方法自动转义 HTML 字符，比 .html() 更安全。若需渲染富文本，请先严格校验和过滤。
• 增强用户体验：可添加回车键支持：

  $("#name").on("keypress", function(e) {
    if (e.key === "Enter") $("#submit").click();
  });

• 作用域精确化：避免全局选择器冲突，推荐限定范围：

  $(".output strong").text(inputValue); // 仅更新 .output 内的 strong

掌握事件源、目标元素与 jQuery 方法的对应关系，是 jQuery 交互开发的第一步。从“点击即更新”开始，你已迈出动态网页开发的关键一步。