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


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 相关文章推荐
QQ邮箱的一个文本编辑器代码
Mar 14 Javascript
Jquery拖拽并简单保存的实现代码
Nov 28 Javascript
jquery查找tr td 示例模拟
May 08 Javascript
JS打开新窗口防止被浏览器阻止的方法
Jan 03 Javascript
jquery实现简单的自动播放幻灯片效果
Jun 13 Javascript
javascript弹出拖动窗口
Aug 11 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
May 03 Javascript
js获取元素的偏移量offset简单方法(必看)
Jul 05 Javascript
vue小白入门教程
Apr 02 Javascript
JS实现可视化音频效果的实例代码
Jan 16 Javascript
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
纯js+css实现在线时钟
Aug 18 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请求Socket接口测试实例
2016/08/12 PHP
关于PHP定时发送服务的解决办法
2017/04/23 PHP
JavaScript多线程的实现方法
2007/05/08 Javascript
谷歌浏览器 insertCell与appendChild的区别
2009/02/12 Javascript
10个基于Jquery的幻灯片插件教程
2010/10/29 Javascript
JS定时刷新页面及跳转页面的方法
2013/07/04 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
2013/10/22 Javascript
JS实现判断碰撞的方法
2015/02/11 Javascript
javascript和jquery实现用户登录验证
2016/05/04 Javascript
jQuery使用经验小技巧(推荐)
2016/05/31 Javascript
Angular2 组件间通过@Input @Output通讯示例
2017/08/24 Javascript
详解vue 组件之间使用eventbus传值
2017/10/25 Javascript
JS关于刷新页面的相关总结
2018/05/09 Javascript
对Vue beforeRouteEnter 的next执行时机详解
2018/08/25 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
2019/01/23 Javascript
Python多线程编程(五):死锁的形成
2015/04/05 Python
python检测某个变量是否有定义的方法
2015/05/20 Python
Python对象类型及其运算方法(详解)
2017/07/05 Python
利用python3随机生成中文字符的实现方法
2017/11/24 Python
详解python执行shell脚本创建用户及相关操作
2019/04/11 Python
Python中的四种交换数值的方法解析
2019/11/18 Python
使用PyTorch将文件夹下的图片分为训练集和验证集实例
2020/01/08 Python
美国在线和移动免费会员制批发零售商:Boxed(移动端的Costco)
2020/01/02 全球购物
优秀英语专业毕业生求职信
2013/11/23 职场文书
一名毕业生的自我鉴定
2013/12/04 职场文书
财务简历的自我评价
2014/03/05 职场文书
青安岗事迹材料
2014/05/14 职场文书
党员承诺书怎么写
2014/05/20 职场文书
俞敏洪北大演讲稿
2014/05/22 职场文书
学校工作推荐信范文
2014/07/11 职场文书
庆国庆活动总结
2014/08/28 职场文书
寒暑假实习证明书模板
2014/11/29 职场文书
音乐会主持人开场白
2015/05/28 职场文书
AJAX学习笔记
2021/05/18 Javascript
漫画「狩龙人拉格纳」公开TV动画预告图
2022/03/22 日漫
使用CSS实现六边形的图片效果
2022/08/05 HTML / CSS