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


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 相关文章推荐
建立良好体验度的Web注册系统ajax
Jul 09 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
Oct 15 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
Apr 06 Javascript
可编辑下拉框的2种实现方式
Jun 13 Javascript
解决wx.onMenuShareTimeline出现的问题
Aug 16 Javascript
Bootstrap CSS布局之表格
Dec 17 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
Oct 24 Javascript
vue组件中的数据传递方法
May 14 Javascript
微信小程序 WXML节点信息查询详解
Jul 29 Javascript
八种Vue组件间通讯方式合集(推荐)
Aug 18 Javascript
原生JS实现多条件筛选
Aug 19 Javascript
vue路由切换时取消之前的所有请求操作
Sep 01 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
重量级动漫纷纷停播!唯独OVERLORD第四季正在英魂之刃继续更新
2020/05/06 日漫
多php服务器实现多session并发运行
2006/10/09 PHP
PHP中使用GD库创建圆形饼图的例子
2014/11/19 PHP
PHP实现指定字段的多维数组排序函数分享
2015/03/09 PHP
Yii框架实现记录日志到自定义文件的方法
2017/05/23 PHP
如何在PHP中读写文件
2020/09/07 PHP
js同时按下两个方向键
2007/12/01 Javascript
$.ajax json数据传递方法
2008/11/19 Javascript
jquery validate.js表单验证的基本用法入门
2010/05/13 Javascript
基于jquery自定义图片热区效果
2012/07/21 Javascript
js弹出框轻量级插件jquery.boxy使用介绍
2013/01/15 Javascript
javascript基于HTML5 canvas制作画箭头组件
2014/06/25 Javascript
javascript实现获取cookie过期时间的变通方法
2014/08/14 Javascript
javascript框架设计之种子模块
2015/06/23 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
2016/10/31 Javascript
js读取本地文件的实例
2017/12/22 Javascript
vue.js获得当前元素的文字信息方法
2018/03/09 Javascript
JS打印彩色菱形的实例代码
2018/08/15 Javascript
基于python的汉字转GBK码实现代码
2012/02/19 Python
Python类的多重继承问题深入分析
2014/11/09 Python
Python嵌套列表转一维的方法(压平嵌套列表)
2018/07/03 Python
python实现淘宝秒杀脚本
2020/06/23 Python
详解django+django-celery+celery的整合实战
2019/03/19 Python
Python Opencv任意形状目标检测并绘制框图
2019/07/23 Python
Python综合应用名片管理系统案例详解
2020/01/03 Python
TensorFlow2.X结合OpenCV 实现手势识别功能
2020/04/08 Python
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
2020/04/10 HTML / CSS
俄罗斯名牌服装网上商店:UNIQUE FABRIC
2019/07/25 全球购物
八年级语文教学反思
2014/02/11 职场文书
建议书标准格式
2014/03/12 职场文书
怎样拟定创业计划书
2014/05/01 职场文书
我读书我快乐演讲稿
2014/05/07 职场文书
安全检查汇报材料
2014/12/26 职场文书
余世维讲座观后感
2015/06/11 职场文书
美德少年事迹材料(2016推荐版)
2016/02/25 职场文书
五年级作文之想象作文
2019/10/30 职场文书