输入框点击时边框变色效果的实现方法


Posted in Javascript onDecember 26, 2016

实例如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="textml; charset=utf-8" />
<title>输入框点击时边框变色效果</title>
</head>
<body>
<style type="text/css">
.focusInput {border:1px solid #99CC33;}
</style>
<script type="text/javascript"> 
function focusInput(focusClass) {
  var elements = document.getElementsByTagName("input");
  for (var i=0; i < elements.length; i++) {
    if (elements[i].type != "button" && elements[i].type != "submit" && elements[i].type != "reset") {
      elements[i].onfocus = function() { this.className = focusClass; };
      elements[i].onblur = function() { this.className = ''; };
    }
  }
}
window.onload = function () {
  focusInput('focusInput');
}
</script>
请输入姓名:<input type="text" />
</body>
</html>

以上就是小编为大家带来的输入框点击时边框变色效果的实现方法全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
使用js获取地址栏中传递的值
Jul 02 Javascript
js时间比较示例分享(日期比较)
Mar 05 Javascript
jquery数组过滤筛选方法grep()简介
Jun 06 Javascript
ie8模式下click无反应点击option无反应的解决方法
Oct 11 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
Mar 13 Javascript
jQuery点击输入框显示验证码图片
May 19 Javascript
Javascript必知必会(四)js类型转换
Jun 08 Javascript
jQuery Select下拉框操作小结(推荐)
Jul 22 Javascript
es6学习笔记之Async函数的使用示例
May 11 Javascript
浅谈mint-ui 填坑之路
Nov 06 Javascript
cdn模式下vue的基本用法详解
Oct 07 Javascript
命令行批量截图Node脚本示例代码
Jan 25 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
Dec 26 #Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
Dec 26 #Javascript
Bootstrap 轮播(Carousel)插件
Dec 26 #Javascript
基于ajax与msmq技术的消息推送功能实现代码
Dec 26 #Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
Dec 26 #Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
Dec 26 #Javascript
Bootstrap的modal拖动效果
Dec 25 #Javascript
You might like
初品cakephp 入门基础
2012/02/16 PHP
php基于表单密码验证与HTTP验证用法实例
2015/01/06 PHP
PHP实现链表的定义与反转功能示例
2018/06/09 PHP
用javascript实现的仿Flash广告图片轮换效果
2007/04/24 Javascript
使用javascript控制cookie显示和隐藏背景图
2014/02/12 Javascript
jqeury-easyui-layout问题解决方法
2014/03/24 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
2014/05/28 Javascript
JS实现控制表格行内容垂直对齐的方法
2015/03/30 Javascript
javascript省市区三级联动下拉框菜单实例演示
2015/11/29 Javascript
jQuery取得iframe中元素的常用方法详解
2016/01/14 Javascript
深入理解node exports和module.exports区别
2016/06/01 Javascript
如何解决hover在ie6中的兼容性问题
2016/12/15 Javascript
canvas的神奇用法
2017/02/03 Javascript
H5上传本地图片并预览功能
2017/05/08 Javascript
BootStrap selectpicker后台动态绑定数据
2017/06/01 Javascript
详解如何在angular2中获取节点
2017/11/23 Javascript
对Angular中单向数据流的深入理解
2018/03/31 Javascript
node.js中module模块的功能理解与用法实例分析
2020/02/14 Javascript
vue实现路由懒加载的3种方法示例
2020/09/01 Javascript
[00:32]2018DOTA2亚洲邀请赛出场——VP
2018/04/04 DOTA
Python递归遍历列表及输出的实现方法
2015/05/19 Python
python正则表达式去除两个特殊字符间的内容方法
2018/12/24 Python
python 利用turtle模块画出没有角的方格
2019/11/23 Python
Android Q之气泡弹窗的实现示例
2020/06/23 Python
用python进行视频剪辑
2020/11/02 Python
css3 transform过渡抖动问题解决
2020/10/23 HTML / CSS
html5嵌入内容_动力节点Java学院整理
2017/07/07 HTML / CSS
基于html5 canvas实现漫天飞雪效果实例
2014/09/10 HTML / CSS
美国知名玩具品牌:Melissa & Doug
2016/08/16 全球购物
结婚典礼证婚词
2014/01/11 职场文书
2015年七一建党节慰问信
2015/03/23 职场文书
2015年度企业工作总结
2015/05/21 职场文书
研讨会致辞
2015/07/31 职场文书
pytorch常用数据类型所占字节数对照表一览
2021/05/17 Python
Django数据库(SQlite)基本入门使用教程
2022/07/07 Python
Python使用pandas导入xlsx格式的excel文件内容操作代码
2022/12/24 Python