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


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+CSS相对定位实现的下拉菜单
Oct 06 Javascript
很实用的js选项卡切换效果
Aug 12 Javascript
Vue 2.0 服务端渲染入门介绍
Mar 29 Javascript
Angular2下使用pdf插件的方法详解
Apr 29 Javascript
JS随机排序数组实现方法分析
Oct 11 Javascript
vue router下的html5 history在iis服务器上的设置方法
Oct 18 Javascript
node 利用进程通信实现Cluster共享内存
Oct 27 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
Aug 01 Javascript
vue中利用Promise封装jsonp并调取数据
Jun 18 Javascript
jQuery 筛选器简单操作示例
Oct 02 jQuery
纯js+css实现仿移动端淘宝网站的弹出详情框功能
Dec 29 Javascript
ES6新增的数组知识实例小结
May 23 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 Hex RGB颜色值互换的使用
2013/05/10 PHP
php获取网页标题和内容函数(不包含html标签)
2014/02/03 PHP
PHP类的反射用法实例
2014/11/03 PHP
php连接oracle数据库及查询数据的方法
2014/12/29 PHP
php正则preg_replace_callback函数用法实例
2015/06/01 PHP
你不知道的文件上传漏洞php代码分析
2016/09/29 PHP
PHP 信号管理知识整理汇总
2017/02/19 PHP
PHP parse_ini_file函数的应用与扩展操作示例
2019/01/07 PHP
php curl操作API接口类完整示例
2019/05/21 PHP
laravel 解决路由除了根目录其他都404的问题
2019/10/18 PHP
laravel框架如何设置公共头和公共尾
2019/10/22 PHP
JQUERY 浏览器判断实现函数
2009/08/20 Javascript
extjs 为某个事件设置拦截器
2010/01/15 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
2013/05/15 Javascript
js获取IP和PcName(IE)在vs中可用
2013/08/02 Javascript
js实现ArrayList功能附实例代码
2014/10/29 Javascript
node.js中的console.time方法使用说明
2014/12/09 Javascript
jquery使用remove()方法删除指定class子元素
2015/03/26 Javascript
JS实现HTML表格排序功能
2016/08/05 Javascript
BootStrap glyphicon图标无法显示的解决方法
2016/09/06 Javascript
[48:44]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS HGT
2014/05/22 DOTA
[42:32]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
Python随机生成彩票号码的方法
2015/03/05 Python
python操作MySQL 模拟简单银行转账操作
2017/09/27 Python
Django配置celery(非djcelery)执行异步任务和定时任务
2018/07/16 Python
Python读写zip压缩文件的方法
2018/08/29 Python
opencv实现静态手势识别 opencv实现剪刀石头布游戏
2019/01/22 Python
Python 利用切片从列表中取出一部分使用的方法
2019/02/01 Python
基于python实现百度翻译功能
2019/05/09 Python
python和js交互调用的方法
2020/06/23 Python
从python读取sql的实例方法
2020/07/21 Python
纠纷协议书
2014/04/16 职场文书
无犯罪记录证明范本
2014/09/15 职场文书
软件项目经理岗位职责
2015/04/01 职场文书
写给女朋友的保证书
2015/05/09 职场文书
Django项目如何正确配置日志(logging)
2021/04/29 Python