JS与jQuery获取input输入框值的完整指南

JS与jQuery获取input输入框值的完整指南

本文旨在演示如何利用JavaScript和jQuery两种技术获取HTML中input输入框的value属性值，具体包括通过name、id和class三种常见属性定位元素的方法。

首先，我们需要构建基础的HTML结构作为示例。

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

jQuery获取input文本框中的值

一、使用jQuery获取input文本框中的值

方法一：通过name属性获取

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

方法二：通过id属性获取

$('#user').val()

方法三：通过class属性获取

$('.uusr').val()

JavaScript获取input输入框中的值

二、使用原生JavaScript获取input输入框中的值

方式一：利用name属性定位

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

方式二：利用id属性定位

document.getElementById("user").value

方式三：利用class属性定位

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

jQuery获取其他input控件的值

此外，以下补充了jQuery获取其他类型input控件值的常见场景。

1. 获取一组radio单选框的值：需指定radio元素的name属性，该属性将同一组的单选按钮关联起来。

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

2. 获取select下拉框的值：直接获取选中项的value。

$('#element').val()

IE9以下版本兼容oninput事件

内容扩展：

在JavaScript中，oninput事件用于监听输入变化，但该事件在IE9及以下版本中不支持。在这些旧版IE浏览器中，需使用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输入框值的详细实例讲解，更多相关技术资料欢迎查阅本站其他文章。