表单获取焦点和失去焦点

HTML代码

<input type="text" placeholder="请输入">

CSS代码

          input{border: initial;outline: none;width: 300px;height: 30px;border: 1px solid gray;}

JS代码

            // 封装函数function int(){// 获取元素let inp=document.querySelector('input');//表单获取焦点 onfous是获得鼠标焦点触发的意思inp.onfocus=function(){//当表单获得焦点 表单里默认值清空 placeholder是input里的默认值属性inp.placeholder="";}//当表单失去焦点 onblur是失去鼠标焦点触发的意思inp.onblur=function(){//input属性默认值是inp.placeholder='请输入内容';}}int()//调用函数

表单验证代码

HTML代码

    <div class="dpt"><input type="text" name="names"><span>请输入6-12为字符</span> </div>

CSS代码

       .dpt{width: 500px;margin: 40px auto;}.dpt>input{border: initial;outline: none;width: 300px;height: 30px;border: 1px solid gray;}

JS代码

        function int(){//封装函数//获取元素let ipt=document.querySelector('.dpt input');let span=document.querySelector('.dpt span');//绑定鼠标失去焦点事件ipt.onblur=function(){//设定name属性值等于这时value用户输入的值let names=this.value;//判断name值的长度进行判断if(names.length<6 && names>12){//如果输入不符合条件会在span元素里提示span.innerHTML='重新输入'span.className='red'}else{//符合条件提示span.innerHTML='输入正确'span.className="green"}}}int()//调用函数

表单获取焦点和失去焦点相关推荐

input失去焦点验证格式_vue2多文本框的表单校验(3)-失去焦点触发校验
vue2多文本框的表单校验(3)-失去焦点触发校验第一步,在子组件中 blur 事件中派发 blur @blur="blur2($event.target.value)" @i ...
非表单元素如何使用焦点事件
在前端开发中,常用的焦点事件有focus和blur. 来看看在菜鸟教程(https://www.runoob.com/jsref/met-html-focus.html)中的介绍: focus() 方 ...
html5表单属性自动获得焦点,HTML5里autofocus属性
转载:http://www.webhek.com/html5-autofocus/ HTML5给我们带来了一大堆神奇的东西.以前需要用JavaScript和Flash完成的任务,例如表单校验,INPU ...
表单输入框自动获得焦点自动获焦+一些实体字符
自动获焦:autofocus,比如百度浏览器直接打卡,光标就在输入框内闪烁,这就是自动获焦. 但如果输入框不是网页的主要功能,就不要用自动获焦. 与后面的focus()方法来获得焦点相对比,自动获焦一 ...
input失去焦点验证格式_表单验证之失去焦点校验
使用场景:会员名.标题等唯一性校验效果图 1.HTML部分添加备注: data-rule="required;remote(get:archives/check_title_availa ...
Validate + Boostrap tooltip 表单验证示例
一.工具准备: 1.boostrap: 下载地址 http://getbootstrap.com/ jquery: jQuery版本需大于或等于1.8.0 jquery.validate.min.j ...
validate+jquery+ajax表单验证
1.案例 1.1 Html form表单内容 <form class="cForm" id="cForm" method="post" ...
html5发光动态效果图,一款带有发光动画的HTML5表单
今天给大家秀一款带有发光动画的HTML5表单,挺酷的,效果图如下: 当表单获取焦点时,表单四周就会呈现出发光动画的效果,并不断地进行颜色渐变:当表单失去焦点时,停止发光.其中颜色渐变的动画只有基于we ...
jQuery（六）插件、Validate验证提交表单、submitHandler、更改错误信息显示的位置、required、Validator、内置验证方式表、validate ()的可选项汇总
jQuery(六)插件.Validate验证提交表单.submitHandler.更改错误信息显示的位置.required.Validator.内置验证方式表.validate ()的可选项汇总文章 ...
AngularJS表单验证
表单网页中用户于服务端交互数据的表单控件有input.select.textarea,而表单是将为了达到一个目的(登录.注册等)各种控件整合到一起的一个集合. 表单和其中的表单控件提供了验证服务,可 ...

表单获取焦点和失去焦点

表单获取焦点和失去焦点相关推荐

最新文章

热门文章