编程 Javascript

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

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>

以上就是小编为大家带来的输入框点击时边框变色效果的实现方法全部内容了，希望大家多多支持三水点靠木~

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

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

用Javascript实现Sleep暂停功能代码

Sep 03 Javascript

通过JS获取用户本地图片路径并显示的代码

Feb 16 Javascript

浅析Node.js中的内存泄漏问题

Jun 23 Javascript

jQuery与getJson结合的用法实例

Aug 07 Javascript

bootstrap table小案例

Oct 21 Javascript

简单学习vue指令directive

Nov 03 Javascript

详解Vue学习笔记进阶篇之列表过渡及其他

Jul 17 Javascript

javascript异步编程的六种方式总结

May 17 Javascript

JS中实现一个下载进度条及播放进度条的代码

Jun 10 Javascript

webpack自动打包和热更新的实现方法

Jun 24 Javascript

小程序中canvas的drawImage方法参数使用详解

Jul 04 Javascript

解决elementui表格操作列自适应列宽

Dec 28 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