js与jquery获取input输入框中的值实例讲解

 更新时间:2020年02月27日 15:01:30   作者:tomingto  
在本篇文章里小编给大家整理了关于js与jquery获取input输入框中的值实例讲解,需要的朋友们可以学习参考下。

如何用javascript获取input输入框中的值,js/jq通过name、id、class获取input输入框中的value

先准备一段 HTML

<input type="text" name"username" id="user" placeholder="用户名" class="uusr"><br>

一、jquery获取input文本框中的值

通过 name:

$('input[name="username"]').val()

通过 id:

$('#user').val()

通过 class:

$('.uusr').val()

二、javascript获取input输入框中的值

通过 name

document.getElementsByName("username")[0].value

通过 id

document.getElementById("user").value

通过 class

document.getElementsByClassName("uusr")[0].value

ps:下面看下jQuery获取各种input输入框的值

1.获取一组radio单选框的值(name属性为一组的radio的name属性)

$("input[name=element_name]:checked").val

2.获取select下拉框的值

$('#element').val()

内容扩展:

JS中的 oninput 事件在 IE9 以下版本不支持,需要使用 IE 特有的 onpropertychange 事件替代,这个事件在用户界面改变或者使用脚本直接修改内容两种情况下都会触发,有以下几种情况:

修改了 input:checkbox 或者 input:radio 元素的选择中状态, checked 属性发生变化。

修改了 input:text 或者 textarea 元素的值,value 属性发生变化。

修改了 select 元素的选中项,selectedIndex 属性发生变化。

if(isIE) 
{ 
 document.getElementById("input").onpropertychange = keys(); 
} 
else //需要用addEventListener来注册事件 
{ 
 document.getElementById("input").addEventListener("input", keys, false);
}

以上就是js与jquery获取input输入框中的值实例讲解的详细内容,更多关于js与jquery获取input输入框中的值的资料请关注脚本之家其它相关文章!

相关文章

  • 使用JS获取SessionStorage的值

    使用JS获取SessionStorage的值

    这篇文章给大家介绍了使用js获取sessionstorage中的值,首先获取它是为了将获得的信息输出或者alert(),其次,在静态页面中,如果使用sessionStorage就相当于在动态页面里连接了数据库一样,具体内容详情大家参考下本文
    2018-01-01
  • ActiveX控件的使用-js实现打印超市小票功能代码详解

    ActiveX控件的使用-js实现打印超市小票功能代码详解

    这篇文章主要介绍了ActiveX控件的使用-js实现打印超市小票功能代码详解,具有一定参考价值,需要的朋友可以了解下。
    2017-11-11
  • 禁止弹窗中蒙层底部页面跟随滚动的几种方法

    禁止弹窗中蒙层底部页面跟随滚动的几种方法

    我们大家在做弹出层的时候,必不可少的一个元素就是蒙层,也就是遮罩层,当弹出层滚动的时候,蒙层底部的页面一般是要求固定不动的,所以这篇文章就来给大家介绍了如何禁止弹窗中蒙层底部页面跟随滚动的几种方法,需要的朋友可以参考下。
    2017-12-12
  • js图片自动轮播代码分享(js图片轮播)

    js图片自动轮播代码分享(js图片轮播)

    这篇文章主要介绍了js图片自动轮播代码,利用图片width显示位置来播放图片和利用数组放入图片经行轮播,需要的朋友可以参考下
    2014-05-05
  • js点击任意区域弹出层消失实现代码

    js点击任意区域弹出层消失实现代码

    这篇文章主要为大家详细介绍了js点击任意区域弹出层消失实现代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • JS 事件延迟执行说明分析

    JS 事件延迟执行说明分析

    为了避免用户鼠标无意识划过,而触发事件。浪费客户端资源。
    2010-05-05
  • 深入理解JavaScript系列(46):代码复用模式(推荐篇)详解

    深入理解JavaScript系列(46):代码复用模式(推荐篇)详解

    这篇文章主要介绍了深入理解JavaScript系列(46):代码复用模式(推荐篇)详解,本文讲解了原型继承、复制所有属性进行继承、混合(mix-in)、借用方法等模式,需要的朋友可以参考下
    2015-03-03
  • 原生js调用json方法总结

    原生js调用json方法总结

    本篇文章给大家详细分析了js调用json方法的总结,对此有需要的朋友可以参考学习下。
    2018-02-02
  • Javascript中Promise的四种常用方法总结

    Javascript中Promise的四种常用方法总结

    这篇文章主要给大家总结介绍了关于Javascript中Promise的四种常用方法,分别是处理异步回调、多个异步函数同步处理、异步依赖异步回调和封装统一的入口办法或者错误处理,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-07-07
  • ie与firefox下的event使用说明与详细区别

    ie与firefox下的event使用说明与详细区别

    event是ie自带的一个对象,而ff中不存在该对象,只能通过传递参数(并且惟一)的方式来实现event.
    2009-10-10

最新评论