JS取 Input 控件值方法

最新推荐文章于 2023-12-12 15:24:02 发布
最新推荐文章于 2023-12-12 15:24:02 发布
阅读量3.9k 收藏
点赞数
分类专栏： # JavaScript 文章标签： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36330228/article/details/88596718
版权

最近经常用到Input 控件，在不同场景用JS去取Input的value的方式是不同的，以下是我暂时想到的几种方式，欢迎收藏补充，为以后开发省时。

<html>
    <header>
        <title>index</title>
        <script src="jquery-3.1.1.min.js"></script>
    </header>

    <body>
        <div>
            <!-- 简单绑定单击方法，其他事件一样处理 -->
            <input id="id_1" class="id_1" value="啦啦啦" name="李丽" sid="sid_1" data-s="lili" onclick="funClick(this)" />            
        </div>

    </body>
    <script>
        function funClick(obj)
        {
            var data = $(obj).attr("data-s");

            var inputVal = $("#id_1").val();
            
            //可以使用任意属性获取,套格式
            var inputVal2 = $("input[sid='sid_1']").val();
            
            var inputVal3 = obj.value;

            var inputVal4 = document.getElementById("id_1").value;

            console.log("inputVal:"+inputVal + ",inputVal2:" + inputVal2 + ",inputVal3:" + inputVal3 + ",inputVal4:" + inputVal4);
            //inputVal:啦啦啦,inputVal2:啦啦啦,inputVal3:啦啦啦,inputVal4:啦啦啦
        }
    
    </script>
</html>

在这里插入图片描述
如有其它方法欢迎补充~

-小龙人
关注
专栏目录
JS+input日历控件
05-20
详细描述日历控件的制作方法，对学习很有帮助
JS获取页面input控件中所有text控件并追加样式属性
12-09
如题，将使用jquery来在页面加载时获取页面input控件中所有text控件并添加样式。 以前写过的页面上所使用的text控件width属性太小需要改动，改动牵扯页面上所有text的属性，改动每个控件的width感觉会很麻烦，所以就...
在js中获取<input>中的value
weixin_34008805的博客
05-23 2150
1.前提：我导入了这些js，不知道有没有依赖作用 <script type="text/javascript" src="js/jquery-3.3.1.js"></script><script type="text/javascript" src="js/jquery-form.js"></script>2.具体格式：//在js中获取<in...
JavaScript中input常用方法
weixin_43894771的博客
03-11 1万+
表单对象常用事件： onfocus：在表单元素收到输入焦点时触发； onblur：在表单元素失去输入焦点时触发。 如：文本框失去焦点时，以下代码将调用myfun()函数。 表单控件元素对象常用方法 blur() 让光标离开当前元素 focus() 让光标落到当前元素上 select() 用于种类为text，textarea，password的元素，选择用户输入的内容 click() 模仿鼠标单击...
javascript学习之＜input＞ 元素属性和方法
白话机器学习
08-04 3063
input>元素主要用于表单组件，它继承了 HTMLInputElement 接口。
js input 限制输入的各种方法
dream0129的博客
04-21 3289
JS判断只能是数字和小数点 1.文本框只能输入数字代码(小数点也不能输入) 2.只能输入数字,能输小数点. 只能输入数字');this.value='';}"> 3.数字和小数点方法二 <input type=text t_value="" o_value="" onkeypress="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))th
Jquery 获得服务器控件值的方法小结
10-29
为了能够准确地用jQuery获取服务器控件的值，开发者通常需要掌握几种不同的方法来应对这种情况。本文将对这三种常见的方法进行详细阐述。 第一种方法是直接使用***内联表达式在jQuery选择器中嵌入服务器控件的...
JQuery获取input控件值.docx
10-19
在JavaScript的库jQuery中，获取和操作HTML页面中的input控件值是常见的需求。下面将详细解释如何使用jQuery来获取和设置text、textarea、radio、checkbox以及select等不同类型的input控件的值。 1. **获取text和...
js 获取服务器控件值的代码
12-11
在JavaScript（js）中，获取服务器控件值是常见的需求，特别是对于交互式的网页应用。本文将详细讲解如何使用JavaScript来获取和操作两种常见的服务器控件：下拉列表（select）和单选按钮（radio）。 一、获取下拉...
javascript input动态查询 百度实时查询
Holy_喜特
06-25 538
javascript input动态查询 百度实时查询 参考链接：https://blog.csdn.net/lizhihaoweiwei/article/details/51221985 原文内容： 前端 UI 设计里面有一个经常需要用到的实时搜索场景： 当用户在 inpu 里面键入新的内容后，不依赖于用户触发(如点击按钮)，立即自动向后端发起 ajax 查询并展示结果。 这一需求有多种实现方案，典型的是可以设置一个定时器轮询 input 中的内容是否发生变化，若变化了则立即发起后
input js选择日期的控件-共用于ASP,JSP,PHP,HTML等
01-16
input js选择日期的控件-共用于ASP,JSP,PHP,HTML等
input 时间日历插件
08-15
input日历插件，可选择日历，以及时间
日期控件(input输入框)
04-07
用于页面的日期选择,里面的插件涉及js和css,而这两个都是基于jquery的,所以资源中还包含了jquery.显示的日期格式可以设定.
js中input框中的值的获取方法；
最新发布
tianxianghuiwei的博客
12-12 5164
替换为您输入框的实际ID，或使用其他选择器（如类名、标签名）来获取输入框元素。input框的值的获取方法有三种。请读者根据需求自行选择。
js input输入框使用个人总结
Confused to find
10-09 4218
1.限制input输入框输入的值为数字（可为小数）onkeyup="value=value.replace(/[^\d\.]/g,'')" onblur="value=value.replace(/[^\d\.]/g,'')"2.自动合并input框值 <ul class="clearfix ulInput"> <li> <em>交通事故责任强制险报价：</em
JavaScript 获取 input 输入框内容的几种方法
sophia11116的博客
12-04 1万+
JavaScript 获取 input 输入框内容的几种方法
html js获取input的值,用JS获取input的输入值
热门推荐
weixin_33870147的博客
06-09 2万+
javascript如何获取input的输入值？第一步先找到这个input元素找到元素有三种方法:document.getElementById("id的名称")document.getElementsByTagName("标签名") 返回的是一个类数组document.getElementsByClassName("类样式名")第二步获取值使用value 属性value 属性可设置或返回选项的值...
input 元素 value 与 setAttribute() 的区别
以爱护甲,爱满枫林。
11-11 1441
1. 普通的 input 元素 在页面上，有这样一个 input 元素。 <input id="myInput" type="text" value="Jethro" />; 我们分别用 input.value 和 getAttribute() 两种方式获取它 value 属性的值： let myInput = document.getElementById("myInput"); console.log(myInput); console.log(myInput.value);
js获取input控件选取的文件的地址
04-05
可以使用`FileReader`对象来读取input控件选取的文件，并获取文件的地址。下面是一个示例代码： ``` // 获取input控件 var input = document.getElementById('fileInput'); // 绑定change事件 input.addEventListener('change', function() { // 获取选中的文件 var file = input.files[0]; // 创建FileReader对象 var reader = new FileReader(); // 读取文件 reader.readAsDataURL(file); // 文件读取完成时触发load事件 reader.onload = function() { // 获取文件地址 var url = reader.result; // 输出文件地址 console.log(url); }; }); ``` 上面的代码中，首先获取input控件，然后绑定change事件。在change事件中，获取选中的文件，并创建FileReader对象来读取文件。当文件读取完成时，触发load事件，从中获取文件地址并输出到控制台。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

-小龙人

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值