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


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 相关文章推荐
面向对象的Javascript之一(初识Javascript)
Jan 20 Javascript
js格式化时间和js格式化时间戳示例
Feb 10 Javascript
javascript冒泡排序小结
Apr 10 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
May 25 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
Oct 10 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
Mar 20 Javascript
Node.js 基础教程之全局对象
Aug 06 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
Mar 02 Javascript
微信小程序 Animation实现图片旋转动画示例
Aug 22 Javascript
vue滚动固定顶部及修改样式的实例代码
May 30 Javascript
vue实现滑动超出指定距离回顶部功能
Jul 31 Javascript
详谈Object.defineProperty 及实现数据双向绑定
Jul 18 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
中国的第一台收音机
2021/03/01 无线电
关于PHPDocument 代码注释规范的总结
2013/06/25 PHP
php实现与erlang的二进制通讯实例解析
2014/07/23 PHP
PHPExcel实现的读取多工作表操作示例
2020/04/14 PHP
JavaScript 精粹读书笔记(1,2)
2010/02/07 Javascript
JS中confirm,alert,prompt函数区别分析
2011/01/17 Javascript
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
2011/07/08 Javascript
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
2011/11/30 Javascript
基于编写jQuery的无缝滚动插件
2014/08/02 Javascript
javascript下拉框选项单击事件的例子分享
2015/03/04 Javascript
Javascript中实现String.startsWith和endsWith方法
2015/06/10 Javascript
JavaScript判断DIV内容是否为空的方法
2016/01/29 Javascript
如何快速上手Vuex
2017/02/14 Javascript
js实现图片粘贴上传到服务器并展示的实例
2017/11/08 Javascript
Nuxt升级2.0.0时出现的问题(小结)
2018/10/08 Javascript
vue实现购物车加减
2020/05/30 Javascript
three.js如何实现3D动态文字效果
2021/03/03 Javascript
用python分割TXT文件成4K的TXT文件
2009/05/23 Python
python使用内存zipfile对象在内存中打包文件示例
2014/04/30 Python
python实现模拟按键,自动翻页看u17漫画
2015/03/17 Python
对pandas数据判断是否为NaN值的方法详解
2018/11/06 Python
python利用re,bs4,requests模块获取股票数据
2019/07/29 Python
python环境搭建和pycharm的安装配置及汉化详细教程(零基础小白版)
2020/08/19 Python
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
2018/01/03 HTML / CSS
男女时尚与复古风格在线购物:RoseGal(全球免费送货)
2017/07/19 全球购物
销售员自我评价怎么写
2013/09/19 职场文书
材料加工硕士生求职信
2013/10/10 职场文书
计算机应用专业学生的自我评价分享
2013/11/03 职场文书
教育技术学专业职业规划书
2014/03/03 职场文书
数学兴趣小组活动总结
2014/07/08 职场文书
工作表扬信
2015/01/17 职场文书
个园导游词
2015/02/04 职场文书
北大自主招生自荐信
2015/03/04 职场文书
趣味运动会广播稿
2015/08/19 职场文书
实战 快速定位MySQL的慢SQL
2022/03/22 MySQL
解决Windows Server2012 R2 无法安装 .NET Framework 3.5
2022/04/29 Servers