JavaScript表单事件 获取焦点:focus 失去焦点:blur 输入事件:input 变化事件:change_js css el-input失去焦点变为span_三二一、的博客-程序员宅基地

技术标签: js  javascript  

JavaScript表单事件

焦点处理

焦点处理主要包括focus(获取焦点)和blur(失去焦点)事件类型。所谓焦点,就是激活表单字段,使其可以响应键盘事件。

获取焦点:focus

当单击或使用Tab键切换到某个表单元素或超链接对象时,会触发该事件。focus事件是确定页面内鼠标当前定位的一种方式。在默认情况下,整个文档处于焦点状态,但是单击或者使用Tab键可以改变焦点位置。

示例:输入框被点击时触发,会在文本框后面提示“请输入11位手机号!!!”

<form action="">
     PhoneNumber:<input type="text" placeholder="input your phone number" maxlength="11">
      <span></span>
</form>
<script>
	let inpEle = document.querySelector("input[type='text']");
	let spanEle = document.querySelector("span");
 	//焦点事件(输入框被点击时触发)
 	inpEle.addEventListener("focus", e => {
    
     	spanEle.innerHTML =  `请输入11位手机号!!!`;
	});
</script>

失去焦点:blur

blur事件类型表示在元素失去焦点时响应,它与focus事件类型是对应的,主要作用于表单元素和超链接对象
示例:输入框失去点击焦点时,会在文本框后面提示“请输入11位手机号!!!”,并且输入内容是非数字时,会提示“请输入数字!!!”

<form action="">
     PhoneNumber:<input type="text" placeholder="input your phone number" maxlength="11">
      <span></span>
</form>
inpEle.addEventListener("blur", e => {
    
    let event = e  || window.event;
    let inputInfo = event.target.value;
    if(!isNaN(inputInfo)) {
    
        spanEle.innerHTML =  `请输入11位手机号!!!`;
    }else {
    
        spanEle.innerHTML = `请输入数字!!!`;
        spanEle.style.color = `red`;
    }
    console.log(inputInfo);
});


输入事件input

inout事件类型在输入框有东西输入时响应,主要作用于表单元素输入的内容和设定的值相比较,可以和正则表达式一起连用来判断输入内容是否合法
示例:输入框输入手机号码,直到输入内容和正则表达式的值相等还时,便提示“输入正确!!!”

form action="">
     PhoneNumber:<input type="text" placeholder="input your phone number" maxlength="11">
      <span></span>
</form>
inpEle.addEventListener("input", e => {
    
    let event = e || window.event;
    let inputInfo = event.target.value;
    let re = /^[1][3-9][0-9]{9}$/g;
    if (re.test(inputInfo)) {
    
        spanEle.innerHTML = `输入正确`;
        spanEle.style.color = `green`;
    } else {
    
        spanEle.innerHTML = `不正确!!!`;
        spanEle.style.color = `red`;
    }
});

变化事件change

change事件类型在输入框输入的值变化时响应,当上一次输入的值和当前输入的值不同时便会触发,会多次触发事件
示例:输入框输入值前后两次不同的时候,都会提示“跟上次不一样!!!”

form action="">
     PhoneNumber:<input type="text" placeholder="input your phone number" maxlength="11">
      <span></span>
</form>
inpEle.addEventListener("change", e => {
    
    spanEle.innerHTML = "跟上次不一样!!!";
});
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_37981080/article/details/114296347

智能推荐

博弈论(2)_求vector是什么意思博弈论-程序员宅基地

上篇博客简单的介绍了一些经典的博弈,这篇继续写一些博弈问题。移动棋子游戏这个是一个应用SG函数的板子题.#include <bits/stdc++.h>using namespace std;const int N=2010,M=6010;int n,m,k,a,b,x;vector<int> ve[N];int sg[N];int SG(int u){ if(sg[u]!=-1) return sg[u]; set<int&_求vector是什么意思博弈论

Linux下Tomcat启动报错:Neither the JAVA_HOME nor the JRE_HOME environment variable is defined At least one-程序员宅基地

这是找不到JAVA_HOME路径,可能导致这个原因的是Linux环境变了。需要在Tomcat的bin文件目录下找到catalina.sh 这个配置文件。 加入下面两条配置信息,指定JDK路径即可 export JAVA_HOME = /home/xy/jdk1.7.0_80(这个是我的JDK路径,自己的JDK路径指定即可) export JRE_HOME =/home/xy/jdk1.7.0_

informatica 9.6.1安装“坑”列表-程序员宅基地

最近这几天因为项目需要,使用informatica powercenter ,说实话,网上确实很难找 informatica 软件的下载。比较官方的下载地方是:https://edelivery.oracle.com/osdc/faces/Home.jspx 网速好的话,可以下载,但是很慢,而且软件比较大。在家的网根本登录不上去。这个确实比较坑。不过好在楼主坚持不懈的找下载,终于是在一个网友的分享

【博客126】( 二 ) 使用libgc库来帮你管理内存-程序员宅基地

内容: 上一篇讲述了如何使用libgc帮你检测内存泄露,那么其实还可以使用libgc帮你管理内存,用它的接口分配的内存,当你一直泄露后其实是有被回收的使用:#include <stdio.h>#include <stdlib.h>#include <unistd.h>#include <gc/gc.h>void test(){ cha..._libgc库

[32位汇编系列]002 - 创建标准的windows窗口(1)_local strc =-程序员宅基地

<!-- /* Style Definitions */ table.MsoNormalTable {mso-style-name:"Table Normal"; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-parent:""; mso

随便推点

学习笔记之《RPC与HTTP的区别》-程序员宅基地

1、HTTP 1.0 、1.1、 2.0有什么区别1.0:短连接。例如发100张图。需要TCP100次握手跟挥手。1.1 :长连接,发100张图,只需要一次握手挥手。2.0 :长连接+IO多路复用。2、 RPC与HTTP的区别2.1 性能主要差别在序列化与反序列化,RPC通过thrift二进制传输。Http json序列化更消耗性能。2.2 传输协议rpc基于tcp协议,也可基于http协议。http只能用http协议。2.3 负载均衡rpc自带负载均衡。http不提供负载均衡,需要自

python post上传大文件_http - python requests post 大文件和获取进度条-程序员宅基地

问 题准备用HTTP 在局域网内 上传一些文件,文件一般都在1G左右r = requests.post('****',data={'path':'2016/07/08/5ASD5SDFASDFASDF/cad.zip'},files={'file': open(filename, 'rb')})这样上传小文件可以, 但是上传大文件时候会py会报 memeryError的内存错误。如何解决此问题呢?..._python http上传文件 打印进度

前端html css3修炼之道,Web前端工程师修炼之道(原书第5版)_罗梦宇的博客-程序员宅基地

Web前端工程师修炼之道(原书第5版)作者:(美)珍妮弗·尼德斯特·罗宾斯(Jennifer Niederst Robbins) 著出版日期:2020年10月文件大小:179.64M支持设备:¥123.00在线试读适用客户端:言商书局iPad/iPhone客户端:下载 Android客户端:下载PC客户端:下载更多详情:查看?对图书下载、阅读卡购买有疑问:立即进入帮助中心>>图书简介目..._前端html + css 修炼

公开课精华|机器人的带约束轨迹规划_微分动态规划 机器人运动规划-程序员宅基地

公开课精华 | 机器人的带约束轨迹规划本文章总结于大疆前技术总监,目前在卡内基梅隆大学读博的杨硕博士在深蓝学院的关于机器人的带约束轨迹规划的公开课演讲内容。--------全文约5000字--------笔者不是机器人领域的,因此特地去了解了一下杨硕博士,深感佩服,不仅是他的履历,更多的是他关于学术上的至臻的追求和执着的探索。本次公开课可以算是一个机器人轨迹规划的入门介绍,同时也能够激励我们,在科研学习中,仰望星空与脚踏实地。整个公开课分为以下几个部分:1、复杂机器人运动轨迹.._微分动态规划 机器人运动规划

java xml xsl 多文件_xml中css和xsl的用法(java web用的不多)_金猪升级包的博客-程序员宅基地

今天J2EE的书,看到的不太懂,参考资料后,总结留着,怕以后做项目用的着。CSS(层叠样式单):简单来说css就是使xml文件按照html的风格显示,取到美化作用的显示的语言。但实际上,xml不是用来显示的,为更多的是用于数据结构的描述。如果是进行数据显示,html会更加方便。是一种样式描述规则;层叠样式单可以嵌入在HTML和XML文档中,也可以以独立的文件形式引入到HTML和XML文档中。层叠..._xsl java web

oracle查询前几名,Oracle子查询前1名的结果(Oracle subquery top 1 result)_医学生彼得的博客-程序员宅基地

Oracle子查询前1名的结果(Oracle subquery top 1 result)我想为b的每个唯一值得到最高的1行,最小值为c的那个特定值。 即使可以有超过1行具有相同的最小值(只需选择第一个)为myTable一个整数(唯一)b整数c整数我试过这个查询SELECT t1.*FROM myTable t1,(SELECT b,MIN(c) as cFROM myTableGROUP BY ..._oracle top 1

推荐文章

热门文章

相关标签