如何实现动态读取input字段值并在页面内容区显示？

没问题，咱们可以通过简单调整代码来实现你要的效果——不用点击按钮，实时把第一个输入框的值显示在页面内容里。

实现思路 #

1. 先在页面中添加一个专门用来展示输入值的容器（比如带ID的<span>或<div>）
2. 页面加载完成时先显示输入框的初始值
3. 监听输入框的内容变化事件，实时更新显示内容

下面是修改后的完整代码：

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      // 获取第一个文本输入框和显示容器
      const firstTextInput = $("input:text:first");
      const displayArea = $('#input-value-display');

      // 页面加载时先渲染初始值
      displayArea.text(firstTextInput.val());

      // 监听输入框的内容变化，实时更新显示
      firstTextInput.on('input', function(){
        displayArea.text($(this).val());
      });
    });
  </script>
</head>
<body>
  Firstname: <input type="text" name="fname" value="Peter"><br>
  Lastname: <input type="text" name="lname" value="Griffin"><br><br>
  <!-- 新增的显示区域 -->
  <p>第一个输入框当前值：<strong id="input-value-display"></strong></p>
</body>
</html>

关键细节说明 #

• 用$("input:text:first")精准选中第一个文本类型的输入框，避免误选其他输入控件
• 使用input事件监听内容变化，它会覆盖用户输入、粘贴、删除等所有修改场景，比keyup更全面
• 页面初始化时主动渲染一次初始值，确保打开页面就能看到默认内容

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