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


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 相关文章推荐
不同浏览器对回车提交表单的处理办法
Feb 13 Javascript
原生js实现查找/添加/删除/指定元素的class
Apr 12 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
Mar 10 Javascript
jquery.ajax之beforeSend方法使用介绍
Dec 08 Javascript
Yii2使用Bootbox插件实现自定义弹窗
Apr 02 Javascript
分享两款带遮罩的jQuery弹出框
Dec 30 Javascript
vue实现文章内容过长点击阅读全文功能的实例
Dec 28 Javascript
详解ECMAScript typeof用法
Jul 25 Javascript
如何使用 vue + d3 画一棵树
Dec 03 Javascript
一秒学会微信小程序制作table表格
Feb 14 Javascript
深入浅析vue-cli@3.0 使用及配置说明
May 08 Javascript
解决vant title-active-color与title-inactive-color不生效问题
Nov 03 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 中文和编码判断代码
2010/05/16 PHP
PHP ignore_user_abort函数详细介绍和使用实例
2014/07/15 PHP
浅谈php安全性需要注意的几点事项
2014/07/17 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
php 数据结构之链表队列
2017/10/17 PHP
javascript实现避免页面按钮重复提交
2015/01/08 Javascript
Javascript基于AJAX回调函数传递参数实例分析
2015/12/15 Javascript
js实现异步循环实现代码
2016/02/16 Javascript
基于Vue.js的表格分页组件
2016/05/22 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
2016/08/29 Javascript
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换
2016/12/06 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
2017/08/16 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
2018/10/19 Javascript
详解一个基于套接字实现长连接的express
2019/03/28 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
2019/07/20 Javascript
vue+vant-UI框架实现购物车的复选框全选和反选功能
2019/11/05 Javascript
[01:36:19]Secret vs NB 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[34:47]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第一场 11.18
2020/11/18 DOTA
布同自制Python函数帮助查询小工具
2011/03/13 Python
Python中的复制操作及copy模块中的浅拷贝与深拷贝方法
2016/07/02 Python
python使用xlrd和xlwt读写Excel文件的实例代码
2018/09/05 Python
Python常见数字运算操作实例小结
2019/03/22 Python
python tools实现视频的每一帧提取并保存
2020/03/20 Python
在pytorch中查看可训练参数的例子
2019/08/18 Python
numpy ndarray 按条件筛选数组,关联筛选的例子
2019/11/26 Python
Python单元测试模块doctest的具体使用
2020/02/10 Python
python json load json 数据后出现乱序的解决方案
2020/02/27 Python
HTML5之tabindex属性全面解析
2016/07/07 HTML / CSS
美国领先的户外服装与装备用品店:Moosejaw
2016/08/25 全球购物
有兼职工作经历的简历自我评价
2014/03/07 职场文书
感谢信怎么写
2015/01/21 职场文书
重阳节慰问信
2015/02/15 职场文书
大学生学年个人总结
2015/02/15 职场文书
文化苦旅读书笔记
2015/06/29 职场文书
解决hive中导入text文件遇到的坑
2021/04/07 Python
FP-growth算法发现频繁项集——发现频繁项集
2021/06/24 Python