精华内容
下载资源
问答
  • 原生js获取input的value
    千次阅读
    2021-03-27 21:28:11
    <input type="text" name="" id="name" value="" placeholder="请输入姓名" />
    var name = document.getElementById("name").value;

     

    更多相关内容
  • 原生JS获取input输入框value

    千次阅读 2021-07-25 18:10:09
    一、原生JS获取input输入框value值的几种方式 二、写html 和JS代码 1、通过标签id获取值的代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <...

    一、原生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>

    三、效果图

    展开全文
  • 原生jsinput事件

    千次阅读 2021-02-27 16:00:45
    1.onfocus 当input 获取到焦点时触发2.onblur 当input失去焦点时触发,注意:这个事件触发的前提是已经获取了焦点再失去焦点的时候才会触发该事件,用于判断标签为空。3.onchange 当input失去焦点并且它的value值...

    1.onfocus  当input 获取到焦点时触发

    2.onblur  当input失去焦点时触发,注意:这个事件触发的前提是已经获取了焦点再失去焦点的时候才会触发该事件,用于判断标签为空。

    3.onchange 当input失去焦点并且它的value值发生变化时触发,个人感觉可以用于注册时的确认密码。

    4.onkeydown 按下按键时的事件触发,

    5.onkeyup 当按键抬起的时候触发的事件,在该事件触发之前一定触发了onkeydown事件--相当于一个按键,两个事件,没怎么用过

    6.onclick  主要是用于 input type=button,input作为一个按钮使用时的鼠标点击事件

    7.onselect  当input里的内容文本被选中后执行,只要选择了就会触发,不是全部选中

    8.oninput  当input的value值发生变化时就会触发,(与onchange的区别是不用等到失去焦点就可以触发了)

    使用方法:

    以上事件可以直接放到input的属性里,例如:

    1 ,

    可以通过js给input dom元素添加相应的事件,

    2 document.getElementByTagName('input').onfocus = function();

    3 事件监听。

    展开全文
  • 原生jsinput赋值并获取用|分割

    千次阅读 2021-06-10 22:02:17
    input type="text"> <input type="text"> <input type="text"> <input type="text"> <input type="text"> <input type="text"> <input type="text"> <input type="text"&...
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="button" id="btn" value="获取文本框的值">
    
    // 给input赋值
    // 1. 获取input type属性为text的文本框
    var textInputs = document.getElementsByTagName('input');
    // console.log(textInputs);
    // 2. 调用设置值的函数
    setValue(textInputs);
    function setValue(element) {
    	for (var i = 0; i < element.length; i++) {
    		// console.log(element[i]);
    		if (element[i].type === 'text') {
    			element[i].value = i;
    		}
    	}
    }
    // 点击按钮获取input的值 用'|'分割
    // // 1. 获取元素
    // var btn = document.getElementById('btn');
    // var str = '';   
    // // 2. 注册事件
    // btn.onclick = function () {
    // 	for (var i = 0; i < textInputs.length; i++) {
    // 		if (textInputs[i].type === 'text') {
    // 			str += textInputs[i].value + '|'; // 数据量大时 字符串拼接效率低
    // 		}
    // 	}
    // 	str = str.substring(0, 17);
    // 	console.log(str);
    // }
    
    // 1. 获取元素
    var btn = document.getElementById('btn');
    var arr = [];   
    // 2. 注册事件
    btn.onclick = function () {
    	for (var i = 0; i < textInputs.length; i++) {
    		if (textInputs[i].type === 'text') {
    			arr.push(textInputs[i].value);
    		}
    	}
    	arr = arr.join('|');
    	console.log(arr); // 0|1|2|3|4|5|6|7|8
    }
    

    在这里插入图片描述

    展开全文
  •  现在我需要从另外一个地方将数据传给input,让其在一刷新的时候就显示数据。  这不难啊,于是我按照我的理解做了  代码如下:    此时,id为zzk_q的值应该为 测试 ,即input框内应该显示 测试 。但结果。...
  • JQ实时监听inputvalue值 jq监听input内容的变化 ... $("input").bind("input propertychange",function...原生JS实时监听input的内容变化 <input type="text" oninput="OnInput(event)" value="鹏仔先生" /&...
  • input type="text" value="请输入关键字" class="gray" id="txtInput"> // 文本框中有灰色字体的“请输入关键字”提示,获取焦点时,清空文本框,输入的字体显示为黑色,当文本框为空失去焦点时,显示默认提示...
  • JavaScript如何获得input元素value

    万次阅读 2018-01-11 16:02:45
    在页面中我们最常见的页面元素就是input了,但是我们如何用JavaScript得到网页input中输入的value值呢,其实很简单,方法也不止一种,据我总结比较常用的就是下面的两种方法,闲话不多说了,下面那就来看看我说的...
  • </head> <body> <input type="checkbox">全选 <div class="box"> <input type="checkbox">1 <input type="checkbox">2 <input type="checkbox">3 <input type="checkbox">4 </div> <script> var...
  • 本文实例讲述了原生javascript自定义input[type=radio]效果。分享给大家供大家参考,具体如下: 找到最为简单的仅仅使用css3的方案 <!DOCTYPE html> <html lang="en"> <head> <meta charset=...
  • 原生js监听input值发生变化

    千次阅读 2019-02-28 20:19:00
    原生JS中可以使用oninput,onpropertychange,onchange oninput,onpropertychange,onchange的用法 1) onchange 触发事件必须满足两个条件: a)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效)...
  • 获取input的dom节点 让他的value防抖 let res = document.getElementById('aaa') let timer = null res.oninput = function(){ clearTimeout(timer) if(res.value===''){ return } timer = setTimeout
  • 1.通过函数传参的方式 以文本框为例,其他组件的访问方式大致都一样。...首先先来谈谈原生JS有哪几种方式获取DOM中的元素中。 通过唯一的id <div id="mydiv"></div> <script> var mydiv= document
  • 原生JS实时获取input值变化

    千次阅读 2018-03-26 15:10:16
    原生JS的onchang是在input值变化并失去焦点的时候才会触发,与现在的实时触发需求不符。除了onchange,原生JS中还有其他检测变化的函数:1. onpropertychange 这个函数才是随着输入实时变化的时候会被调用的回调函数...
  • 在用js脚本改动该元素值时候亦能触发onpropertychange事件。 oninput:是onpropertychange的非IE浏览器版本,支持firefox和opera等浏览器,但有一点不同,它绑定于对象时,并非该对象所有属性改变都能触发
  • 原生js之onchange、oninput事件

    千次阅读 2021-03-23 20:43:35
    input id="hah" value="hehe"> 给定一个输入框设定value值,这种就可以看做单向数据流。而要实现双向数据流,需要监听事件 1、onchange事件:需要注意的一点是原生onchange事件的触发机制 --- 1、内容改变;2、...
  • js如何获取一个inputvalue

    万次阅读 2017-04-20 10:02:28
    方法一: ... "javascript">   function print(){   var a=myform.name.value;   alert(a);   }         "myform">   "text" name="name" id="nn" />   "button" name=
  • js获得input中的value

    万次阅读 2017-10-07 08:35:44
    <input type="text" name="aa" id="aa" onclick="doClick()"/>方法1: <script> function doClick() { var element = document.getElementByName("aa").value; } 方法2: <script> functi
  • jsinputvalue赋值

    千次阅读 2019-05-20 22:59:00
    js : 是一门网页的脚本语言jquery :jquery是基于js的一种框架,也就是说jquery 就对 js 的一个扩展,封装,就是让javascript更好用,更简单,jquery就是要用更少的代码,漂亮的完成更多的功能。文本框如下 <...
  • 本文实例讲述了JavaScript获取并更改input标签name属性的方法。分享给大家供大家参考。具体实现方法如下: <input name="kk"></input> [removed] // 这里用getElementsByTagName把所有的input对象取...
  • 获取inputvalue

    千次阅读 2020-08-19 11:07:09
    <input id='username' class='username' ref="username" ...1.原生js方法 var username = document.getElementById('username').value; 2.jq方法 var username = $('#username').val(); 3.vue v-model方法 var us
  • input type = "text" v-model = "num_1" mydata=10086 @input="watch_num_1"/> watch_num_1(e){ console.log(e); console.log(e.target.getAttribute('mydata')); 控制台输出: 自定义属性就在: e....
  • input type=“text” 手动修改 input 的值, 使用 dom.getAttribute(“value”) 只能得到 html Dom中的值,而不能得到修改后的值(即内存中的值); 可以通过 dom.value 得到修改后的最新值(内存中的值) 使用: ...
  • 在浏览器中,JS更新inputvalue属性,会触发"change"事件吗?如果不会触发,请问为什么?有什么办法解决吗?根据对上面问题的理解,我分为以下三个认知阶段:第一阶段:读者只需要答案即可:当input在用户输入后,...
  • 微信小程序获取input当中的value

    千次阅读 2021-03-23 15:40:37
    获取value的值 本来吧打算归于常见效果,但是发现这个对我印象很深刻,就单独挑出来...input maxlength="7" type="text" bindinput='btnValue' placeholder="请输入内容" value="{{inputvalue}}" /></view>
  • js清空input file的value

    千次阅读 2020-06-11 17:38:10
    在做上传本地图片的功能时遇到一个问题,第一次点file按钮选择图片完成会触发onchange事件,第二次如果选择相同的图片文件上传,则...注意:浏览器的安全机制不允许直接用js修改file的value为空字符串以外的值,强制.
  • 获取input输入框value的5种方法

    万次阅读 2018-04-09 20:27:18
    &lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;getElement应用&...input type="text"

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 42,906
精华内容 17,162
关键字:

原生js获取input的value