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输入框中的值的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • js与jquery实时监听输入框值的oninput与onpropertychange方法

    本文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法.分享给大家供大家参考.具体如下: 最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时监听文本框 value 值的变化,然后匹配相关内容. 初接项目,首先想到的是 JQ 里的 change,但是马上排除此方法,因为 change 是在文本框失去焦点时才会触发.曲线救国一下,想到用 keydown 来解决.其他一切还好,只是当不通过键盘操作,而是通过鼠标来复制粘贴时,这个事件是无法触发

  • jQuery/JS监听input输入框值变化实例

    input事件: onchange: 1.要在 input 失去焦点的时候才会触发: 2.在输入框内容变化的时候不会触发change,当鼠标在其他地方点一下才会触发: 3.onchange event 所有主要浏览器都支持: 4.onchange 属性可以使用于:<input>, <select>, 和 <textarea>. <script> function change(){ var x=document.getElementById("pa

  • jquery.tagsinput.js实现记录checkbox勾选的顺序

    jquery.tagsinput.js实现记录checkbox勾选的顺序

    业务需求:可以根据checkbox的先后勾选传递有顺序的值让后台接收,决定用tagsinput显示checkbox的先后勾选顺序,并实时响应checkbox的勾选状态 思路:checkbox的值存在一个数组A,新创建一个数组B,如果选中一个,B push一个值,取消一个,remove一个值,因为数组是有序的,就做到响应checkbox的勾选顺序 效果: 代码: <!DOCTYPE html> <html> <head> <meta charset="UT

  • JavaScript和jQuery获取input框的绝对位置实现方法

    实例如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>javascript与jQu

  • Jquery把获取到的input值转换成json

    话不多说,请看代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> jquery把获取

  • 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: $('inp

  • jquery获取input输入框中的值

    如何用javascript获取input输入框中的值,js/jq通过name.id.class获取input输入框中的value 先准备一段 HTML <input type="text" id="CN_NAME" name="CN_NAME" class="CN_NAME"> 一.jquery获取input文本框中的值 通过 name var name = $('input[name="CN_NAME&

  • PHP获取input输入框中的值去数据库比较显示出来

    前端: <!--商品查询--> <input type="text" name="bianhao" value="" maxlength="10" size="10" style="width:100px; margin:0px 0px 0px 25px;height:20px;"/> <input type="submit" value

  • vue父组件中获取子组件中的数据(实例讲解)

    如下所示: <FormItem label="上传头像" prop="image"> <uploadImg :width="150" :height="150" :name="'avatar'" size="150px*150px" ref="avatar"></uploadImg> </FormItem> <Fo

  • JS和Jquery获取和修改label的值的示例代码

    获取值: label标签在JS和Jquery中使用不能像其他标签一样用value获取它的值: 复制代码 代码如下: var label=document.getElementById("id"); var value=label.value; var value=$("#id").val(); 可以这样: JS: 复制代码 代码如下: var label=document.getElementById("id"); var value=label

  • jQuery获取radio选中项的值实例

    jQuery获取radio选中项的值实例

    <title></title> <script src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(function () { //没有默认选中的情况 //先判断radio是否有选中项,再获取选中的值 $("#btnclick").click(function () { //获取选中项的valu

  • C# winform程序读取文本中的值实例讲解

    在C#winform程序开发过程中,我们可能需要定期去设定一些变化的值,但这些值在程序中又要被用来做对比或参照,比如我们设定一个固定值让程序去检查当前的值是否符合规定,这个功能实现其实很简单.下面,我们一起来看看实现的过程. 建立一个winform程序,在这程序的release或者debug目录中建立一个后缀名为ini的文件,我们在后续要读取这个文件中的值. ini结尾的文件,可以双击打开的,跟文本文档类似.我们这里建立一个unlock.ini的文件,并在里面填上TEST888这几个字符. 把程

  • 微信小程序登录时如何获取input框中的内容

    这篇文章主要介绍了微信小程序登录时如何获取input框中的内容,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 最近写小程序项目遇到一些问题,今天整理下这些问题的解决方法,希望对用户有帮助.下面是登录页,点击登录时获取input框中的值, 效果如下: wxml布局如下: <view > <input type="text" placeholder-style="color:#fff;" bindin

  • jquery获取input type=text中的值的各种方式(总结)

     实例如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JQuery获取文本框的值</title> <meta h

  • jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例

    jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例

    本文实例讲述了jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能.分享给大家供大家参考,具体如下: 最近都成为页面仔了,主要工作都放在了前段,以前总是写后台程序,对前端的一些技术 html,css,javascript ,虽然都懂一些,但要做出比较好看页面,还是有很大的差距的.最近就遇到了这样一个要求不是很高,但有点小清新风格的登录或注册页面,要求如下: 1. 在输入框中 如果没有内容,则显示提示:比如"请输入用户名" 2. 如果输入框获得焦点,则隐藏提示 3.

随机推荐