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


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 相关文章推荐
一个简单的Node.js异步操作管理器分享
Apr 29 Javascript
js实现的类似于asp数据字典的数据类型代码实例
Sep 03 Javascript
jQuery对指定元素中指定字符串进行替换的方法
Mar 17 Javascript
JS实现的5级联动Select下拉选择框实例
Aug 17 Javascript
JS原型对象的创建方法详解
Jun 16 Javascript
js removeChild 方法深入理解
Aug 16 Javascript
在vue中使用css modules替代scroped的方法
Mar 10 Javascript
详解小程序缓存插件(mrc)
Aug 17 Javascript
javascript导出csv文件(excel)的方法示例
Aug 25 Javascript
vue源码中的检测方法的实现
Sep 26 Javascript
详解如何使用Node.js实现热重载页面
May 06 Javascript
JS轻量级函数式编程实现XDM二
Jun 16 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 Echo字符串的连接格式
2016/03/07 PHP
PHP页面输出时js设置input框的选中值
2016/09/30 PHP
PHP 信号管理知识整理汇总
2017/02/19 PHP
Laravel框架使用Redis的方法详解
2018/05/30 PHP
使用TextRange获取输入框中光标的位
2006/10/14 Javascript
input的focus方法使用
2010/03/13 Javascript
完美解决AJAX跨域问题
2013/11/01 Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
2015/01/13 Javascript
JavaScript 七大技巧(二)
2015/12/13 Javascript
谷歌Chrome浏览器扩展程序开发小记
2016/01/06 Javascript
AngularJS基础 ng-click 指令示例代码
2016/08/01 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
2017/12/11 Javascript
js的Object.assign用法示例分析
2020/03/05 Javascript
[01:07:19]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第一场
2018/04/06 DOTA
[46:40]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[01:14]2019完美世界城市挑战赛(秋季赛)全国总决赛精彩花絮
2020/01/08 DOTA
Python中asyncore的用法实例
2014/09/29 Python
以一段代码为实例快速入门Python2.7
2015/03/31 Python
python遍历文件夹找出文件夹后缀为py的文件方法
2018/10/21 Python
详解Python3注释知识点
2019/02/19 Python
opencv python在视屏上截图功能的实现
2020/03/05 Python
浅谈Selenium 控制浏览器的常用方法
2020/12/04 Python
美国糖果店:Sugarfina
2019/02/21 全球购物
日本高岛屋百货购物网站:TAKASHIMAYA
2019/03/24 全球购物
2013年研究生毕业感言
2014/02/06 职场文书
股权转让意向书
2014/04/01 职场文书
简洁的英文求职信范文
2014/05/03 职场文书
征用土地赔偿协议书
2014/09/26 职场文书
小学教育见习报告
2014/10/31 职场文书
初中毕业生自我评价
2015/03/02 职场文书
2015年班级工作总结范文
2015/04/03 职场文书
Python中快速掌握Data Frame的常用操作
2021/03/31 Python
python - timeit 时间模块
2021/04/06 Python
Mysql排序的特性详情
2021/11/01 MySQL
WinServer2012搭建DNS服务器的方法步骤
2022/06/10 Servers
httpclient调用远程接口的方法
2022/08/14 Java/Android