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


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 相关文章推荐
actionscript与javascript的区别
May 25 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
Sep 19 Javascript
JS实现控制表格单元格垂直对齐的方法
Mar 30 Javascript
jquery实现页面虚拟键盘特效
Aug 08 Javascript
浅谈node.js中async异步编程
Oct 22 Javascript
JS图片压缩(pc端和移动端都适用)
Jan 12 Javascript
Javascript设计模式之装饰者模式详解篇
Jan 17 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
Dec 08 Javascript
ReactNative中使用Redux架构总结
Dec 15 Javascript
Vue组件通信的四种方式汇总
Feb 08 Javascript
JS实现json数组排序操作实例分析
Oct 28 Javascript
js和jquery判断数据类型的4种方法总结
Aug 28 jQuery
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
杏林同学录(四)
2006/10/09 PHP
写php分页时出现的Fatal error的解决方法
2011/04/18 PHP
php和jquery实现地图区域数据统计展示数据示例
2014/02/12 PHP
PHP中把stdClass Object转array的几个方法
2014/05/08 PHP
Yii2实现让关联字段支持搜索功能的方法
2016/08/10 PHP
Nginx+php配置文件及原理解析
2020/12/09 PHP
AngularJS中的过滤器使用详解
2015/06/16 Javascript
浅谈jquery中使用canvas的问题
2016/10/10 Javascript
详解extract-text-webpack-plugin 的使用及安装
2018/06/12 Javascript
Spring boot 和Vue开发中CORS跨域问题解决
2018/09/05 Javascript
浅谈webpack性能榨汁机(打包速度优化)
2019/01/09 Javascript
深入理解 JS 垃圾回收
2019/06/03 Javascript
jQuery/JS监听input输入框值变化实例
2019/10/17 jQuery
ES6函数实现排它两种写法解析
2020/05/13 Javascript
js实现查询商品案例
2020/07/22 Javascript
Python实现的Kmeans++算法实例
2014/04/26 Python
python正则表达式爬取猫眼电影top100
2018/02/24 Python
Python实现带参数的用户验证功能装饰器示例
2018/12/14 Python
Python中IP地址处理IPy模块的方法
2019/08/16 Python
Python 使用元类type创建类对象常见应用详解
2019/10/17 Python
Python面向对象封装操作案例详解
2019/12/31 Python
python图片验证码识别最新模块muggle_ocr的示例代码
2020/07/03 Python
图解Python中深浅copy(通俗易懂)
2020/09/03 Python
详解利用python识别图片中的条码(pyzbar)及条码图片矫正和增强
2020/11/17 Python
Crucial英睿达法国官网:内存条及SSD固态硬盘升级
2018/07/13 全球购物
以工厂直接定价的传奇性能:Ben Hogan Golf
2019/01/04 全球购物
意大利网上药房:Farmacia 33
2020/01/27 全球购物
毕业生的自我鉴定该怎么写
2013/12/02 职场文书
年会主持词结束语
2014/03/27 职场文书
低碳日宣传活动总结
2014/07/09 职场文书
2015年母亲节活动总结
2015/02/10 职场文书
廉政承诺书范文
2015/04/28 职场文书
2015年人事专员工作总结
2015/04/29 职场文书
2016年党员公开承诺书格式范文
2016/03/24 职场文书
Python中如何处理常见报错
2022/01/18 Python
windows系统安装配置nginx环境
2022/06/28 Servers