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


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中动态添加事件(绑定事件)的代码
Jan 09 Javascript
jquery增加和删除元素的方法
Jan 14 Javascript
在JavaScript中对HTML进行反转义详解
May 18 Javascript
Jquery为DIV添加click事件的简单实例
Jun 02 Javascript
Javascript中级语法快速入手
Jul 30 Javascript
JavaScript-html标题滚动效果的简单实现
Sep 08 Javascript
jQuery实现可展开折叠的导航效果示例
Sep 12 Javascript
Bootstrap源码解读表单(2)
Dec 22 Javascript
基于Vuejs和Element的注册插件的编写方法
Jul 03 Javascript
微信小程序之圆形进度条实现思路
Feb 22 Javascript
jQuery轻量级表单模型验证插件
Oct 15 jQuery
8个有意思的JavaScript面试题
Jul 30 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
WinXP + Apache +PHP5 + MySQL + phpMyAdmin安装全功略
2006/07/09 PHP
谈PHP生成静态页面分析 模板+缓存+写文件
2009/08/17 PHP
PHP chmod 函数与批量修改文件目录权限
2010/05/10 PHP
php中JSON的使用方法
2015/04/30 PHP
简单实现php上传文件功能
2017/09/21 PHP
PHP连接及操作PostgreSQL数据库的方法详解
2019/01/30 PHP
Laravel 自定命令以及生成文件的例子
2019/10/23 PHP
PHP设计模式(七)组合模式Composite实例详解【结构型】
2020/05/02 PHP
Extjs学习笔记之一 初识Extjs之MessageBox
2010/01/07 Javascript
jquery中dom操作和事件的实例学习 下拉框应用
2011/12/01 Javascript
全面理解面向对象的 JavaScript(来自ibm)
2013/11/10 Javascript
js控制table合并具体实现
2014/02/20 Javascript
jQuery中append()方法用法实例
2015/01/08 Javascript
Jquery 实现table样式的设定
2015/01/28 Javascript
zepto.js中tap事件阻止冒泡的实现方法
2015/02/12 Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
2015/04/15 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
2016/01/25 Javascript
基于MVC方式实现三级联动(JavaScript)
2017/01/23 Javascript
node文件上传功能简易实现代码
2017/06/16 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
2017/10/26 Javascript
Node之简单的前后端交互(实例讲解)
2017/11/14 Javascript
Vue将页面导出为图片或者PDF
2020/08/17 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
2019/09/03 Javascript
使用JavaScript通过前端发送电子邮件
2020/05/22 Javascript
学习和使用python的13个理由
2019/07/30 Python
python中的逆序遍历实例
2019/12/25 Python
python基于opencv 实现图像时钟
2021/01/04 Python
基于DOM+CSS3实现OrgChart组织结构图插件
2016/03/02 HTML / CSS
英国打印机墨盒销售网站:Ink Factory
2019/10/07 全球购物
平面网站制作专科生的自我评价分享
2013/12/11 职场文书
运动会广播稿60字
2014/01/15 职场文书
大学生通用个人自我评价
2014/04/27 职场文书
爱之链教学反思
2014/04/30 职场文书
2015年新农村建设指导员工作总结
2015/07/24 职场文书
2016年全国助残日活动总结
2016/04/01 职场文书
oracle删除超过N天数据脚本的方法
2022/02/28 Oracle