使用.value获取HTML表单用户输入时无法返回实时值的问题

核心问题 #

你遇到的情况是：点击登录按钮时始终获取到input的初始默认值而非用户输入的实时值，本质原因通常是JS代码执行时机不对，或是Ionic框架环境下的特殊渲染逻辑导致。

为什么.value看起来失效？ #

input标签的value属性是页面加载时的初始默认值，而DOM元素的.value属性是当前用户输入的实时值——正常情况下，点击事件触发时获取.value是完全正确的用法，不需要更换。问题出在代码执行时机或框架特性上。

解决方案 #

1. 确保JS在DOM加载完成后执行 #

如果你的JS代码写在HTML内容之前（比如<head>标签里），会导致代码执行时input和button元素还未被浏览器渲染，此时绑定的事件可能无法正确获取实时值。调整方法有两种：

方法A：把JS放在HTML末尾

将<script>标签放在</body>闭合标签之前：

<ion-icon name="mail-outline"></ion-icon>
<input type="email" id="emailData" value="___@gmail.com" required>
<label for="">Email</label>
<button id="loginButton">Log in</button>

<script>
function myFunction() {
 var x = document.getElementById("emailData").value;
 alert(x)
}
document.getElementById("loginButton").onclick = myFunction;
</script>
</body>

方法B：用DOM加载事件包裹JS

通过DOMContentLoaded事件确保DOM完全加载后再执行代码：

document.addEventListener('DOMContentLoaded', function() {
  function myFunction() {
    var x = document.getElementById("emailData").value;
    alert(x);
  }
  document.getElementById("loginButton").onclick = myFunction;
});

2. 针对Ionic框架的特殊处理 #

你的代码中出现了<ion-icon>，说明是Ionic项目：

• 如果使用的是Ionic封装的ion-input组件，不能直接用原生.value获取值，需要通过框架的状态绑定：
  • Angular/Ionic Angular：用双向绑定[(ngModel)]="email"，在TS文件中通过this.email获取值
  • Ionic React：用useState绑定输入值，如const [email, setEmail] = useState('___@gmail.com')，直接通过email变量获取实时值
• 如果是在Ionic页面中直接使用原生input，回到方案1即可解决。

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