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


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,超强推荐share.js
Dec 23 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
May 31 Javascript
JavaScript中把数字转换为字符串的程序代码
Jun 19 Javascript
js获取某月的最后一天日期的简单实例
Jun 22 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
Jul 03 Javascript
jQuery学习笔记之jQuery动画效果
Sep 09 Javascript
JQuery页面地址处理插件jqURL详解
May 03 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
Sep 20 Javascript
微信小程序自定义可滑动日历界面
Dec 28 Javascript
微信小程序实现判断是分享到群还是个人功能示例
May 03 Javascript
JS实现音乐钢琴特效
Jan 06 Javascript
JS控制下拉列表左右选择实例代码
May 08 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
jQuery中的RadioButton,input,CheckBox取值赋值实现代码
2014/02/18 PHP
PHP如何将XML转成数组
2016/04/04 PHP
thinkphp3.x中display方法及show方法的用法实例
2016/05/19 PHP
Thinkphp5框架简单实现钩子(Hook)行为的方法示例
2019/09/03 PHP
彻底搞懂JS无缝滚动代码
2007/01/03 Javascript
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
2009/12/28 Javascript
javascript转换字符串为dom对象(字符串动态创建dom)
2010/05/10 Javascript
推荐40款强大的 jQuery 导航插件和教程(上篇)
2012/09/14 Javascript
javascript获取ckeditor编辑器的值(实现代码)
2013/11/18 Javascript
jquery取消选择select下拉框示例代码
2014/02/22 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
2015/05/19 Javascript
javascript实现图片轮播效果
2016/01/20 Javascript
在vue项目中,使用axios跨域处理
2018/03/07 Javascript
vue引用js文件的多种方式(推荐)
2018/05/17 Javascript
详解nodejs http请求相关总结
2019/03/31 NodeJs
JavaScript中的一些实用小技巧总结
2019/04/07 Javascript
layer.confirm()右边按钮实现href的例子
2019/09/27 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
2020/05/19 Javascript
vue 子组件watch监听不到prop的解决
2020/08/09 Javascript
使用python实现扫描端口示例
2014/03/29 Python
Python实现自动为照片添加日期并分类的方法
2017/09/30 Python
Python 使用多属性来进行排序
2019/09/01 Python
Python自动采集微信联系人的实现示例
2020/02/28 Python
python将unicode和str互相转化的实现
2020/05/11 Python
python中upper是做什么用的
2020/07/20 Python
详解Django中异步任务之django-celery
2020/11/05 Python
采用冷却技术的超自然舒适度:GhostBed床垫
2018/09/18 全球购物
蔻驰法国官网:COACH法国
2018/11/14 全球购物
造价工程师个人求职信
2013/09/21 职场文书
电脑租赁公司创业计划书
2014/01/08 职场文书
《奇妙的国际互联网》 教学反思
2014/02/25 职场文书
国庆节演讲稿
2014/05/27 职场文书
2014年幼儿园小班工作总结
2014/12/04 职场文书
国家助学金受助感言
2015/08/01 职场文书
Go语言使用select{}阻塞main函数介绍
2021/04/25 Golang
TypeScript实用技巧 Nominal Typing名义类型详解
2022/09/23 Javascript