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


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字符串的各种格式的转换 ToString,Format
Aug 08 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
Apr 17 Javascript
Js与下拉列表处理问题解决
Feb 13 Javascript
jQuery回调函数的定义及用法实例
Dec 23 Javascript
基于Javascript实现倒计时功能
Feb 22 Javascript
JavaScript的模块化开发框架Sea.js上手指南
May 12 Javascript
vue中将网页打印成pdf实例代码
Jun 15 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
Jul 10 Javascript
JS实现图片拖拽交换效果
Nov 30 Javascript
vuex存值与取值的实例
Nov 06 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
Jul 01 Javascript
关于小程序优化的一些建议(小结)
Dec 10 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
PHP中实现汉字转区位码应用源码实例解析
2010/06/14 PHP
php中的注释、变量、数组、常量、函数应用介绍
2012/11/16 PHP
php生成随机密码自定义函数代码(简单快速)
2014/05/10 PHP
简单解决新浪SAE无法上传文件的问题
2015/05/13 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
详解PHP 二维数组排序保持键名不变
2019/03/06 PHP
jQuery 跨域访问问题解决方法
2009/12/02 Javascript
Jquery index()方法 获取相应元素索引值
2012/10/12 Javascript
js实现一个省市区三级联动选择框代码分享
2013/03/06 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
2013/12/24 Javascript
js报$ is not a function 的问题的解决方法
2014/01/20 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
2015/03/04 Javascript
js实现下拉列表选中某个值的方法(3种方法)
2015/12/17 Javascript
利用JS实现文字的聚合动画效果
2017/01/22 Javascript
微信小程序模板之分页滑动栏
2017/02/10 Javascript
详解vue父子组件间传值(props)
2017/06/29 Javascript
JS实现的全选、全不选及反选功能【案例】
2019/02/19 Javascript
微信小程序实现Session功能及无法获取session问题的解决方法
2019/05/07 Javascript
详解Vscode中使用Eslint终极配置大全
2019/11/08 Javascript
[06:44]2018DOTA2亚洲邀请赛4.5 SOLO赛 MidOne vs Sumail
2018/04/06 DOTA
matplotlib给子图添加图例的方法
2018/08/03 Python
如何安装并使用conda指令管理python环境
2019/07/10 Python
在django view中给form传入参数的例子
2019/07/19 Python
python2和python3实现在图片上加汉字的方法
2019/08/22 Python
基于python调用psutil模块过程解析
2019/12/20 Python
python爬虫中抓取指数的实例讲解
2020/12/01 Python
捷克移动配件网上商店:ProMobily.cz
2019/03/15 全球购物
馥蕾诗美国官网:Fresh美国
2019/10/09 全球购物
DataList 能否分页,请问如何实现?
2015/05/03 面试题
有兼职工作经历的简历自我评价
2014/03/07 职场文书
《春到梅花山》教学反思
2014/04/16 职场文书
运动会宣传口号
2014/06/09 职场文书
声乐专业大学生职业生涯规划书:理想的未来需要自己去打造
2014/09/20 职场文书
大学生个人总结范文
2015/02/15 职场文书
解决Python保存文件名太长OSError: [Errno 36] File name too long
2022/05/11 Python
JS轻量级函数式编程实现XDM三
2022/06/16 Javascript