如何获取input输入框中的值？

获取input输入框中值的关键是获取input的value属性。

1、javascript

通过DOM元素获取方法来获取input元素，然后访问其value属性。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>获取input输入框中的值</title>
</head>
<body><div><input class="input-box" type="text"><input type="button" value="点击获取input输入框中的值" onclick="getInputVal()"></div><p class="content"></p><script>function getInputVal(){const inputBox = document.querySelectorAll('.input-box')[0],content = document.querySelectorAll('.content')[0];// 获取input输入框中的值let inputVal = inputBox.value;if(inputVal){content.innerHTML = inputVal;}else{alert('请在input输入框中填点东西');}}</script>
</body>
</html>

关键代码：let inputVal = document.querySelectorAll('.input-box')[0].value; 通过DOM元素获取方法（document.getElementById()、document.getElementsByTagName()、document.getElementsByName()、document.querySelectorAll()…）来获取input元素。

通过form表单以及input的name属性获取input元素，然后访问其value属性。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>获取input输入框中的值</title>
</head>
<body><form name="myForm"><input type="text" name="inputBox"><input type="button" value="点击获取input输入框中的值" onclick="getInputVal()"></form><p class="content"></p><script>function getInputVal(){const content = document.querySelectorAll('.content')[0];// 获取input输入框中的值let inputVal = myForm.inputBox.value;if(inputVal){content.innerHTML = inputVal;}else{alert('请在input输入框中填点东西');}}</script>
</body>
</html>

关键代码：let inputVal = formName.inputName.value; 为form和input设置name属性，通过name来获取input元素。

参考文献

[1] JavaScript如何获得input元素value的值

如何获取input输入框中的值？相关推荐

html取输入框中的值,jquery获取input输入框中的值
如何用javascript获取input输入框中的值,js/jq通过name.id.class获取input输入框中的value 先准备一段 HTML 一.jquery获取input文本框中的值通过 ...
如何通过js获取html文本框中的值,js与jquery获取input输入框中的值实例讲解
如何用javascript获取input输入框中的值,js/jq通过name.id.class获取input输入框中的value 先准备一段 HTML 一.jquery获取input文本框中的值通过 ...
html获取text输入框中的值
1.在head中引用jquery: <script type="text/javascript" src="/js/jquery-1.7.1.min.js" ...
Vue input输入框中的值如何变成黑点
<login-input type="password" placeholder="请输入密码" ref="passwordInput" ...
vue input只能输入正整数_前端开发：Vue中获取input输入框值的方法
在前端开发过程中,会用到各种各样的基础组件,一些常用的组件的使用方法一定要滚熟于心,对于刚入门的新手来说,对基础知识的熟练掌握很重要,如果不熟练就会影响开发速度.那么本篇博文就来分享一个比较基础的知识 ...
php监听input,jQuery如何实时监听获取input输入框的值
jQuery实时监听获取input输入框的值,在我们日常web项目开发也常需要去实现这样的功能效果.为了作出即时动作去引导浏览者,以便提高网站的用户体验感. 下面我们就结合具体的代码示例,为大家介绍j ...
react获取input输入框的单值以及多值的方法
react 获取input 输入框的值的多种方式第一种方式非受控组件获取非受控组件获取 ref import React , {Component} from 'react'; export d ...
html 文本框赋值日期代码,如何获取到input输入框中date的当前日期
如何获取到input输入框中date的当前日期开发工具与关键技术:Visual Studio 2015 作者:徐晶旗撰写时间:2019年6月8日首先input是表单中的一种元素,所以接下来先给 ...
微信小程序获取input输入框的值
前几天写小程序写小程序发现小程序不能dom操作,这个就很尴尬啊,然后问了下度娘发现可以这样获得的. 这个是wxml代码 <view class='box'><form bindsub ...

如何获取input输入框中的值？

如何获取input输入框中的值？

1、javascript

参考文献

如何获取input输入框中的值？相关推荐

最新文章

热门文章