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


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 相关文章推荐
js function使用心得
May 10 Javascript
JS函数验证总结(方便js客户端输入验证)
Oct 29 Javascript
JavaScript转换农历类实现及调用方法
Jan 27 Javascript
js实现从数组里随机获取元素
Jan 12 Javascript
原生js三级联动的简单实现代码
Jun 07 Javascript
url中的特殊符号有什么含义(推荐)
Jun 17 Javascript
js动态添加的DIV中的onclick事件简单实例
Jul 25 Javascript
Easyui在treegrid添加控件的实现方法
Jun 23 Javascript
基于JS实现html中placeholder属性提示文字效果示例
Apr 19 Javascript
JavaScript设计模式之装饰者模式实例详解
Jan 17 Javascript
详解超简单的react服务器渲染(ssr)入坑指南
Feb 28 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
Nov 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关于IE下的iframe跨域导致session丢失问题解决方法
2013/10/10 PHP
php中JSON的使用方法
2015/04/30 PHP
CI框架中$this-&gt;load-&gt;library()用法分析
2016/05/18 PHP
Zend Framework常用校验器详解
2016/12/09 PHP
万能的php分页类
2017/07/06 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
JS 判断undefined的实现代码
2009/11/26 Javascript
js 优化次数过多的循环 考虑到性能问题
2011/03/05 Javascript
JS实现获取剪贴板内容的方法
2016/06/21 Javascript
ES6新特性之Object的变化分析
2017/03/31 Javascript
详解vue.js之props传递参数
2017/12/12 Javascript
js中apply和Math.max()函数的问题及区别介绍
2018/03/27 Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
2018/08/29 Javascript
Vue表单输入绑定的示例代码
2018/11/01 Javascript
layer父页获取弹出层输入框里面的值方法
2019/09/02 Javascript
js实现列表向上无限滚动
2020/01/13 Javascript
[02:54]DOTA2亚洲邀请赛 VG战队出场宣传片
2015/02/07 DOTA
在Python的Bottle框架中使用微信API的示例
2015/04/23 Python
Python字符串详细介绍
2015/05/09 Python
基于Python实现一个简单的银行转账操作
2016/03/06 Python
详解如何为eclipse安装合适版本的python插件pydev
2018/11/04 Python
Django框架视图层URL映射与反向解析实例分析
2019/07/29 Python
如何关掉pycharm中的python console(图解)
2019/10/31 Python
详解Python实现进度条的4种方式
2020/01/15 Python
viagogo波兰票务平台:演唱会、体育比赛、戏剧门票
2018/04/23 全球购物
LN-CC日本:高端男装和女装的奢侈时尚目的地
2019/09/01 全球购物
实习自我鉴定模板
2013/09/28 职场文书
机械电子工程专业推荐信范文
2013/11/20 职场文书
花店创业计划书范文
2014/02/07 职场文书
幼儿园教师自我鉴定
2014/03/20 职场文书
精神文明建设标语
2014/06/16 职场文书
勿忘国耻9.18演讲稿(经典篇)
2014/09/14 职场文书
冰雪公主观后感
2015/06/16 职场文书
公文写作:工伤事故分析报告怎么写?
2019/11/05 职场文书
SpringBoot整合JWT的入门指南
2021/06/29 Java/Android