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


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 相关文章推荐
jquery监控数据是否变化(修正版)
Apr 12 Javascript
jquery的flexigrid无法显示数据提示获取到数据
Jul 19 Javascript
JS随机打乱数组的方法小结
Jun 22 Javascript
angular ng-repeat数组中的数组实例
Feb 18 Javascript
jquery Form轻松实现文件上传
May 24 jQuery
vue快捷键与基础指令详解
Jun 01 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
Aug 14 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
Feb 22 Javascript
AutoJs实现刷宝短视频的思路详解
May 22 Javascript
vue路由分文件拆分管理详解
Aug 13 Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
Sep 09 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
Sep 14 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
使用 eAccelerator加速PHP代码的方法
2007/09/30 PHP
PHP 登录记住密码实现思路
2013/05/07 PHP
jQuery获取css z-index在各种浏览器中的返回值
2010/09/15 Javascript
javascript event 事件解析
2011/01/31 Javascript
js弹出窗口之弹出层的小例子
2013/06/17 Javascript
一个Action如何调用两个不同的方法
2014/05/22 Javascript
AngularJS入门教程之Hello World!
2014/12/06 Javascript
JS输出空格的简单实现方法
2016/09/08 Javascript
Javascript函数中的arguments.callee用法实例分析
2016/09/16 Javascript
在 React、Vue项目中使用SVG的方法
2018/02/09 Javascript
angular6.0开发教程之如何安装angular6.0框架
2018/06/29 Javascript
如何从0开始用node写一个自己的命令行程序
2018/12/29 Javascript
react 中父组件与子组件双向绑定问题
2019/05/20 Javascript
详解vue-router的Import异步加载模块问题的解决方案
2020/05/13 Javascript
微信小程序实现选择地址省市区三级联动
2020/06/21 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
2020/10/02 Javascript
Element-ui upload上传文件限制的解决方法
2021/01/22 Javascript
[02:52]2014DOTA2西雅图国际邀请赛 CIS战队巡礼
2014/07/07 DOTA
[02:31]《DAC最前线》之选手酒店现场花絮
2015/01/30 DOTA
python使用str &amp; repr转换字符串
2016/10/13 Python
python按时间排序目录下的文件实现方法
2018/10/17 Python
Python3实现mysql连接和数据框的形成(实例代码)
2020/01/17 Python
python 生成任意形状的凸包图代码
2020/04/16 Python
Python3爬虫中Splash的知识总结
2020/07/10 Python
CSS3 真的会替代 SCSS 吗
2021/03/09 HTML / CSS
iHerb俄罗斯:维生素、补品和天然产品
2020/07/09 全球购物
个人求职简历的自我评价范文
2013/10/09 职场文书
幼儿园教师获奖感言
2014/03/11 职场文书
环境卫生倡议书
2014/08/29 职场文书
先进基层党组织材料
2014/12/25 职场文书
2015年教师节贺卡寄语
2015/03/24 职场文书
学生安全责任协议书
2016/03/22 职场文书
小学生必读成语故事大全:送给暑假的你们
2019/07/09 职场文书
Python中使用subprocess库创建附加进程
2021/05/11 Python
python神经网络学习 使用Keras进行简单分类
2022/05/04 Python
Java异常体系非正常停止和分类
2022/06/14 Java/Android