oninput事件（检测用户的输入内容）

最新推荐文章于 2023-09-10 16:28:24 发布
最新推荐文章于 2023-09-10 16:28:24 发布
阅读量619 收藏
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lei2350934xj/article/details/72729903
版权
<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .search{
            position: relative;
            width:390px;
            height:30px;
            border:1px solid #ccc;
        }
        .search input{
            width:380px;
            height:25px;
        }
        .search label{
            position: absolute;
            top:0;
            left:40px;
            color:#848181;
            cursor:text;/*鼠标光标 文本显示*/
        }
    </style>
</head>


<body>
    <div class="search">
        <input id="txt" type="text">
        <label id="hotMessage"for="txt">必败的国际大牌</label>
    </div>
</body>
</html>




<script>
    var hotMessage = document.getElementById("hotMessage");
    var txt = document.getElementById("txt");
    //oninput事件是表单的输入事件,用来获取表单的输入信息
    txt.oninput = function (){
        if(this.value!=""){
            hotMessage.style.display = "none";
        }else{
            hotMessage.style.display = "inline-block";
        }
    }
</script>
lei2350934xj
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
H5新增事件 oninput限制用户输入
qq_40890601的博客
06-05 930
oninput ：内容一发生改变就执行此事件 onkeyup
oninput,onpropertychange,onchange的用法和区别
08-31
在 Web 开发中，了解 oninput、onpropertychange、onchange 三个事件的用法和区别非常重要，这三个事件都是用于检测用户输入的变化，但它们之间存在着一些关键的差异。 首先，让我们来了解 onchange 事件。当 ...
regedit.jsp 表单注册用户名密码
11-17
regedit.jsp <%@ page contentType="text/html;charset=UTF-8"%> <script language="javascript"> function on_submit() { if (form1.username.value == "") { alert("用户名不能为空，请输入用户名！"); form1.username.focus(); return false; } if (form1.userpassword.value == "") { alert("用户密码不能为空，请输入密码！"); form1.userpassword.focus(); return false; } if (form1.userpassword2.value == "") { alert("用户确认密码不能为空，请输入密码！"); form1.userpassword2.focus(); return false; } if (form1.userpassword.value != form1.userpassword2.value) { alert("密码与确认密码不同"); form1.userpassword.focus(); return false; } } </script> <script language="javascript"> function check(action) { form1.action=action; form1.submit(); if (form1.username.value == "") { alert("用户名不能为空，请输入用户名！"); window.location.href="regedit.jsp"; } } </script> <html> <head> <title>无标题文档</title> </head> <body> <form name="form1" method="post" action="regeditIn.jsp" onSubmit="return on_submit()"> 用户名： <input type="text" name="username"/> <input type="button" name="Button" value="检测用户" onClick="check('checkuser.jsp')"> <p>密码： <input type="password" name="userpassword"/> </p> <p>确认密码： <input type="password" name="userpassword2"/> </p> <p> <select name="selectlogrole"> <option value="student">学生</option> <option value="teacher">老师</option> <option value="admin">管理员</option> </select> </p> <p align="left"> <input type="submit" name="Submit" value="提交"/> </p> </form> </body> </html> regeditIn.jsp <%@ page contentType="text/html;charset=UTF-8"%> <%@ page import="java.sql.*" %> <%@ page import="Bean.QueryBean" %> <jsp:useBean id="query" class="Bean.QueryBean" scope="session"> <jsp:setProperty name="query" property="*"/> </jsp:useBean> <html> <body> <% request.setCharacterEncoding("UTF-8"); String name=request.getParameter("username"); String password=request.getParameter("userpassword"); String s=request.getParameter("selectlogrole"); String str="select username from userinfo where username='"+name+"'"; ResultSet rs=query.executeQuery(str); if(rs.next()){ %> <script language="javascript"> alert("此用户已经被占用请重新注册"); history.back(); </script> <% }else{ String sql="insert into userinfo(username,userpassword,logrole) values('"+name+"','"+password+"','"+s+"')"; boolean sert=query.executeUpdata(sql); if(sert) {%> <script language="javascript"> alert("注册成功"); window.location.href="index.jsp"; </script> <% }else { %> <script language="javascript"> alert("注册失败！！"); history.back(); </script> <% } } %> </body> </html> checkuser.jsp <%@ page contentType="text/html;charset=UTF-8"%> <%@ page import="java.sql.*" %> <%@ page import="Bean.QueryBean" %> <jsp:useBean id="query" class="Bean.QueryBean" scope="session"> <jsp:setProperty name="query" property="*"/> </jsp:useBean> <html> <body> <% request.setCharacterEncoding("UTF-8"); String name=request.getParameter("username"); String str="select username from userinfo where username='"+name+"'"; ResultSet rs=query.executeQuery(str); if(rs.next()){ %> <script language="javascript"> alert("此用户已经被占用"); history.back(); </script> <% } else { %> <script language="javascript"> alert("此用户可用"); history.back(); </script> <% } %> </body> </html>
Input用户输入的检测 u3d学习总结笔记本
闪电黑客的博客
09-14 459
目录 1.检测键盘操作 2.检测鼠标操作 3.全检测 4.自定义操作 //============================================== 1.检测键盘操作 if(Input.GetKeyDown(KeyCode.Space)){//检测按下单次 print("Down"); } if(Input.GetKeyUp(KeyCode.Space)...
《JavaScript学习笔记》之实时监听并获取input输入框值的方法
每天八杯水的博客
01-10 5349
JavaScript实时监听获取input输入框值的方法，oninput 和 onpropertychange 两个事件用于实时获取输入框内容，前者适用于Google、Firefox；或者适用于IE浏览器。
oninput 事件与onchange
nicknailo博客
08-16 1036
当用户向 中尝试输入时执行 JavaScript：该实例演示了如何向 input 元素中添加 "oninput" 事件。 向文本框中尝试输入即可触发事件。 输入您的名字: function myFunction() { alert("input 输入框值已发生变化。"); } oninput 事件在用户输入时触发。该事件在 或 元素的值发生改变时触发。 oninput 事件在元素
input标签的事件之oninput事件
大家好，我是云村的王子
01-12 663
最近在写前端的时候，用到了oninput事件。(其中也涉及了onclick) 问题：鼠标点击数字和运算符的时候，文本框里的内容到达一定长度时，会出现无法继续往后面跟随光标的问题。 解决：见下面代码 这是HTML页面中的代码 <form name="calculator"> <input type="button" id="clear" class="btn other"...
实时获取input输入框中的值
兔老大的胡萝卜
09-21 7628
实时获取input输入框中的值需要oninput和onpropertychange属性来实现。原因是onpropertychange属性为IE专属，而oninput属性支持大部分浏览器包括IE9及以上的版本。 oninput与onpropertychange失效的情况： 　　　oninput事件：1. 在脚本中改变value时，不会触发；2.从浏览器的自动下拉提示中选取时，不会触发。 例如： va...
监听input与div的内容变化
夜轩14
12-07 6812
input文本框在输入内容改变的时候，可以通过onchange监听，但是在通过赋值改变的时候，onchange是无法监听的,触发onchange事件，需要满足两个条件（1）失去焦点（2）值改变。 注：onchange和onpropertychange的不同。 IE下，当一个HTML元素的属性改变的时候，都能通过 onpropertychange来即时捕获。 onchange在属性值改变时还必须
HTML5新增标签 & oninput与onchange
09-10 3136
新增基本标签 article aside figcaption figure footer header hgroup mark nav section time keygen meter summary header与footer标签用于表示页面或者应用的头部和尾部。nav用于表示导航。 可以使用section和article标签替代过度使用div，用这些标签来对页面进行内容划分，例如ar
oninput事件
kilig
06-06 2234
oninput 事件在用户输入时触发。 一般用在在 或 中的数据值发生改变时触发。 注：该事件和onchange 事件有些类似。 不同之处在于 oninput 事件在元素值发生变化是立即触发， onchange 在元素失去焦点时触发。另外一点不同是 onchange 事件也可以作用于 和 元素。 **一个简单的示例：**实时的获取输入框中用户输入的内容 <p>在文本框中尝试输入触发函数。</p> <input type="text" id="myInput" oninp
FANUC报警列表[归类].pdf
10-11
仅在TV检测为ON时发生。 4. 003号报警：报警信息为“Too many digits”，报警说明为输入了超过允许位数的数据。 5. 004号报警：报警信息为“Address not found”，报警说明为在程序段的开始无地址，输入了数字或符号...
高清监控系统兼容所有网络摄像机
10-04
Accounts=用户管理 Network=网络管理 PTZ=云台管理 Exit=退出 ;系统管理 IPCam Setting=摄像机设置 Ok=确定 Cancel=取消 System Setting=系统设置 Maintenance=系统维护 Logs=日志管理 ;系统设置页面 Device name:...
[原创]自己工作中常用的模板库，简化你的工作
10-12
This component is very important for metaprogramming based on function. ◆ 有时候STL的算法并不好用，经常是为了第三个参数需要自己写一个专用的琐碎的小函数。 虽然可以用std的bind或者boost的lambda，...
微信小程序——如何获取到输入框的值
TianXuab的博客
09-10 4825
通过以上两种方式，你可以获取到输入框的值，并进行后续的处理。
input 中事件 onchange onpropertychange 和oninput事件的差别
COCOLI_BK的博客
05-30 697
汇总onchange onpropertychange 和oninput事件的差别： 1、onchange事件与onpropertychange事件的差别： onchange事件在内容改变（两次内容有可能还是相等的）且失去焦点时触发；onpropertychange事件却是实时触发，即每添加或删除一个字符就会触发。通过js改变也会触发该事件。可是该事件IE专有。 ...
oninput,onpropertychange，onchange的用法和区别
snowstorm的博客
04-01 633
原文链接：http://blog.csdn.net/sunlylorn/article/details/6123355 1、前言     由于工作需要，需实现一个类似于微博输入框的功能，在用户动态输入文字的时候，修改提示“您还可以输入XX字”。如下图所示：    因此，稍微研究了一下oninput,onpropertychange,onchange的区别和用法，以及onproperty
oninput完美限制输入正整数
---
10-12 847
oninput完美限制输入非0正整数 方法一 oninput="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" 方法二 <el-input v-model="ruleForm.num" @input='verificationNum'> verificationNum(){ if(this.ruleF
js获取input输入框输入后的值
m0_63056435的博客
03-23 7187
首先是给input上个id <input style="width: 50px;margin: 0 20px" id="aaa" > 然后获取这个dom let res = document.getElementById('aaa') 绑定oninput就完事了 res.oninput=function(){ console.log(res.value) } 这个方法是每次输入的时候都获取 和blur不一样 blur是失去焦点后执行的 ...
如何实时检测input标签的变动，并加校验
最新发布
09-27
在这个示例代码中，我们为input标签添加了一个'oninput'事件监听器，当输入内容改变时，会触发函数。函数中根据输入的内容进行了简单的校验，如果输入的内容不是数字，则将输入框的边框设置为红色；如果输入的内容是...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值