原生js操作input文本框注册获取焦点、失去焦点事件，设置文本框默认值

<input type="text" value="请输入关键字" class="gray" id="txtInput">

// 文本框中有灰色字体的“请输入关键字”提示，获取焦点时，清空文本框，输入的字体显示为黑色，当文本框为空失去焦点时，显示默认提示文字
// 1. 获取元素
var txtInput = document.getElementById('txtInput');
// 2. 注册获取焦点事件
txtInput.onfocus = function () {if (txtInput.value === '请输入关键字') {this.value = '';this.className = 'black';}
}
// 3. 注册失去焦点事件
txtInput.onblur = function () {// if (txtInput.value === '') {// if (txtInput.value.length === 0 判断字符串的值是否为空时常用if (txtInput.value.length === 0 || txtInput.value === '请输入关键字') {this.value = '请输入关键字';this.className = 'gray';}
}

原生js操作input文本框注册获取焦点、失去焦点事件，设置文本框默认值相关推荐

ajax 原生js操作ajax
一.ajax 1.什么是ajax? ajax是异步javascript与xml,它是多种技术一个集合.可以无刷新状态更新页面. 2.ajax的优缺点: ...
使用原生js写一个简单的注册登录页面
目录 1.注册页面 2.登录页面 1.首先是我们的注册页面这是我们的html骨架 <!DOCTYPE html> <html lang="en">< ...
原生js操作元素类名—classList.add()、classList.remove()、classList.contains()、classList.toggle()
原生js操作元素类名 classList.add( newClassName ): classList.toggle( className ): classList.remove( oldClassN ...
input获取焦点原生js_原生js的input事件
1.onfocus 当input 获取到焦点时触发 2.onblur 当input失去焦点时触发,注意:这个事件触发的前提是已经获取了焦点再失去焦点的时候才会触发该事件,用于判断标签为空. 3.o ...
html文本框边框变色,怎么使用CSS设置文本框的边框
如何使用CSS设置文本框的边框: 默认的文本框边框一般是不会满足实际的需求,所以需要人为的对边框进行设置,下面就来介绍一下如何设置文本框的边框. 代码实例: 蚂蚁部落 .mytest{ border: ...
获取焦点失去焦点事件
<style>input {color: gray;outline: none;}</style> </head> <body><input ty ...
2019-7-26 [MySQL] 安装与介绍语句分类/语法数据类型 DDL数据定义:创建/查看/删除/使用 DML数据操作:增删改主键约束自动增长列非空约束默认值 Navicat
文章目录 0.知识回顾 1.数据库介绍 1.1 数据库概述 1.1.1 什么是数据库 1.1.2 什么是数据库管理系统 1.1.3 数据库与数据库管理系统的关系 1.2 数据库表 1.3 表数据 1. ...
原生JS操作DOM对象
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
原生JS使用input上传图片
使用Jquery上传头像 new formData来完成file上传 <form action="" id="forms"><h3>& ...

原生js操作input文本框注册获取焦点、失去焦点事件，设置文本框默认值

原生js操作input文本框注册获取焦点、失去焦点事件，设置文本框默认值相关推荐

最新文章

热门文章