在前端开发中，经常需要从用户那里获取输入的文本值。例如，一个登录表单需要获取用户名和密码。在JavaScript中，可以使用不同的方法来获取输入文本值。下面将介绍一些常见的方法。
1. 获取表单元素
首先，我们需要获取输入文本值的表单元素。可以通过使用document.getElementById()方法或document.querySelector()方法来获取表单元素。例如：
const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password');上面的代码使用了document.getElementById()方法获取id为username和password的表单元素。
2. 获取输入文本值
有了表单元素之后，就可以获取输入文本值了。可以使用表单元素的value属性来获取输入文本值。例如：
const usernameValue = usernameInput.value; const passwordValue = passwordInput.value;
上面的代码使用了表单元素的value属性来获取输入的用户名和密码文本值。
3. 监听输入事件
除了直接获取输入文本值外，也可以监听输入事件来获取输入文本值。可以使用表单元素的addEventListener()方法来监听输入事件。例如：
usernameInput.addEventListener('input', function(event) {
const usernameValue = event.target.value;
});上面的代码将输入事件绑定到用户名表单元素上，并在事件处理程序中获取输入的用户名文本值。
4. 表单验证
获取输入文本值之后，通常需要对其进行验证。可以在提交表单之前使用JavaScript代码对输入文本值进行验证。例如：
-- -------------------- ---- -------
----- ------------ - ----------------------------------
-------------------------------------- --------------- -
-----------------------
----- ------------- - --------------------
----- ------------- - --------------------
-- -------------- --- --- -
-----------------
-------
-
-- -------------- --- --- -
----------------
-------
-
-- ----
---上面的代码将点击事件绑定到提交按钮上，并在事件处理程序中对输入的用户名和密码文本值进行验证。
结论
获取输入文本值是前端开发中的基础操作。本文介绍了如何获取表单元素、获取输入文本值、监听输入事件以及表单验证等常见操作。在实际开发中，还需要考虑其他因素，例如跨浏览器兼容性、安全性等问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/14815
