原生JS获取input输入框value值

最新推荐文章于 2024-04-30 17:59:49 发布
最新推荐文章于 2024-04-30 17:59:49 发布
阅读量1.9w 收藏 59
点赞数 12
文章标签： 前端 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46260870/article/details/119085380
版权

一、原生JS获取input输入框value值的几种方式

二、写html 和JS代码

1、通过标签id获取值的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>获取input框value</title>
    <script>
        function get_input_value(){
            // var name = $('input[name="username"]').val();
            // alert(name);
            var name = document.getElementById("user").value;
            // console.log("name"+name);
            alert(name);

        }
    </script>
</head>
<body>
    用户名:<br>
    <!-- 定义input框，创建提交按钮 -->
    <input type="text" id="user" name="username"><br>
  
    <button onclick="get_input_value()">提交</button>

    
</body>
</html>

2、通过标签class类名获取值的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>获取input框value</title>
    <script>
        function get_input_value(){
            // var name = $('input[name="username"]').val();
            // alert(name);
            var name = document.getElementsByClassName("uusr")[0].value;
           
            alert(name);

        }
    </script>
</head>
<body>
    用户名:<br>
    <!-- 定义input框，创建提交按钮 -->
    <input type="text" id="user" name="username" class="uusr"><br>
  
    <button onclick="get_input_value()">提交</button>

    
</body>
</html>

三、效果图

though the night
关注
  • 12
    点赞
  • 踩
  • 59
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
学习使用js/jquery获取和清空input的value值
徊忆羽菲
11-11 3596
学习使用js/jquery获取和清空input的value值一、获取input的值1、通过普通选择器获取2、通过标签选择器获取二、清空input的value值 一、获取input的值 1、通过普通选择器获取 通过类选择器获取：$('.class').val() 通过id选择器获取：$(" #id").val() 2、通过标签选择器获取 $(" input[ name='name' ] ").val() $(" input[ type='text' ] ").val() $(" input[ type='
JavaScript 获取 input 输入框内容的几种方法
m0_74359467的博客
10-19 4850
4、 使用 `document.getElementsByTagName()` 获取 input 元素的 value 属性。3、 使用 `document.getElementsByName()` 获取 input 元素的 value 属性。1、 使用 `document.getElementById()` 获取 input 元素的 value 属性。2、使用 `document.querySelector()` 获取 input 元素的 value 属性。
HTML中input输入框（详解输入框的用法）
最新发布
百赢出品，必属精品
04-30 8844
input>元素是HTML表单中最常见的元素之一，用于收集用户的输入数据。它可以包含多种类型的输入，如文本、密码、数字等。通过指定不同的type属性，可以定义不同类型的输入字段。类型（type）属性定义输入字段的类型，如文本框、密码框、单选按钮、复选框等。常见类型包括textpasswordradiocheckboxfile等。名称（name）属性用于标识输入字段的名称，以便在表单提交时能够将数据传输到服务器。对于单选按钮和复选框，相同名称的一组按钮被视为一个组，只能选择其中的一个或多个。
获取input标签的value
qq_25775675的博客
08-30 2638
JS的方法 window.onload = function(){ var psel = document.getElementById("provSelect1"); alert("获取到的value：" + psel.value); //获取 psel.value = "123"; //设置 alert("设置后的v
JavaScript如何获得input元素value值
热门推荐
zeroone001的专栏
04-10 12万+
转载地址：http://aquarius-zf.iteye.com/blog/605144 在页面中我们最常见的页面元素就是input了，但是我们如何用JavaScript得到网页input中输入的value值呢，其实很简单，方法也不止一种，据我总结比较常用的就是下面的两种方法，闲话不多说了，下面那就来看看我说的方法吧： 方法一、 Java代码
获取input中value的四种方法
透明大脑
06-29 2万+
js获取input文本框值的4种方法   姓名：       电话：         document.writeln(document.forms[0].tel.value); document.writeln(document.form1.tel.value); document.writeln(document.forms[0].elem
2022-03-10 工作记录--JS-jQuery获取多个相同name名的input框的value值
weixin_48850734的博客
03-10 1780
jQuery获取多个相同name名的input框的value值
vue监听input标签的value值方法
10-18
3. **通过JavaScript原生方法**：直接使用`document.getElementById`获取`input`元素并读取`value`属性，例如`this.materialName = document.getElementById("materialSearch").value`。 扩展知识部分，展示了如何...
JS验证input输入框（字母，数字，符号，中文）
01-19
input type=text onkeyup=value=value.replace(/[^a-zA-Z]/g,'')> 只能输入英文 <input type=text onkeyup=value=value.replace(/[^\a-\z\A-\Z]/g,'') onkeydown=fncKeyStop(event) onpaste=return false ...
vue input输入框模糊查询的示例代码
08-27
在实现Input输入框模糊查询时，我们需要使用原生js的search()方法，该方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。如果没有找到任何匹配的子串，则返回 -1。 二、Vue模糊查询实现 ...
js与jquery实时监听输入框值的oninput与onpropertychange方法
12-12
本文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法。分享给大家供大家参考。具体如下： 最近做过一个项目，需求是下拉框里自动匹配关键字，具体细节是实时监听文本框 value 值的变化，然后...
微信小程序 input输入框控件详解及实例（多种示例）
08-31
- `bindinput`事件监听用户输入，当输入内容改变时触发，事件处理函数会接收到一个`Event`对象，其中`detail.value`包含了当前输入框的值。 2. **属性设置** - `type`属性用于指定输入框类型，如`text`（默认）、...
JQ获取input的 value值以及操作方法
qq_63803722的博客
11-15 2336
如何获取input Value值 以及拓展使用
JS之原生JS获取表单得所有值
Java学习录
06-30 9704
今天碰到了一个没有使用任何框架的表单，大概包含20多个属性，简单抽取几个： &lt;from id="auditFrom"&gt; &lt;label&gt;房龄：&lt;/label&gt; &lt;input name="houseAge" type="number" &gt; &lt;label&gt;权属情况：&lt;/lab
html js获取input的值,用JS获取input的输入值
weixin_33870147的博客
06-09 2万+
javascript如何获取input的输入值？第一步先找到这个input元素找到元素有三种方法:document.getElementById("id的名称")document.getElementsByTagName("标签名") 返回的是一个类数组document.getElementsByClassName("类样式名")第二步获取值使用value 属性value 属性可设置或返回选项的值...
vue.js获取input输入框的值
05-24
可以通过v-model指令来实现实时获取输入框的值，也可以使用原生的JavaScript方法来获取输入框的值。 1. 使用v-model指令 ```html <template> <div> <input type="text" v-model="inputValue" /> <button @click="getValue">获取输入框的值</button> </div> </template> <script> export default { data() { return { inputValue: "" // 初始化输入框的值为空 }; }, methods: { getValue() { console.log(this.inputValue); // 打印输入框的值 } } }; </script> ``` 2. 使用原生JavaScript方法 ```html <template> <div> <input type="text" id="inputBox" /> <button @click="getValue">获取输入框的值</button> </div> </template> <script> export default { methods: { getValue() { const inputValue = document.getElementById("inputBox").value; console.log(inputValue); // 打印输入框的值 } } }; </script> ``` 注意：在使用原生JavaScript方法获取输入框的值时，必须给输入框添加一个id属性，方便通过getElementById()方法获取。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值