网页上默认的文本框老是灰色风格，看的都有点不耐烦了，用CSS和JS改变其样式是大家都喜欢用的方法，今天写了一个点击边框变色的文本框，鼠标点击文本框将要输入的时候，文本框自动变色高亮显示，非常有视觉效果，让文本框变漂亮了许多。HTML代码如下：
<!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>
<script type="text/javascript">
// focusClass : 获取焦点时的样式
// normalClass : 正常状态下的样式
function focusInput(focusClass, normalClass) {
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 = normalClass||''; };
}
}
}
</script>
<script type="text/javascript">
window.onload = function () {
focusInput('focusInput', 'normalInput');
}
</script>
请输入姓名：<input type="text" class="normalInput" />
<style type="text/css">
.normalInput {border:1px solid #ccc;}
.focusInput {border:1px solid #FFD42C;}
</style>
</body>
</html>
在火狐下也有效，只不过火狐和chrome下，这两款浏览器默认会自动会输入框添加点击效果，所以有时候看不清，IE下表现突出。前端框架示例
相关推荐
资源共3个JS和一个HTML 实现了前台文本框输入c#代码时的代码提示以及关键字变色 在线编译器的好帮手
文本框获得焦点时变色,html,javascript,css,用作表单比较不错
鼠标经过字体变颜色，并且给文本框填写值，
JS文件： 代码如下:function mouseAction() { var textInputs = document.getElementsByTagName(“input”); var len = textInputs.length; var index = 0; var textInput; /* 也能用 for in 语句遍历 for (text...
本文实例讲述了javascript实现简单的可随机变色网页计算器。分享给大家供大家参考，具体如下： 该程序能实现简单的加、减、乘、除、求余，页面还添加了随机变换颜色的功能。 运行效果图如下： 完整实例代码如下： ...
经过研究发现无法在原生的loading中插入客制化文本框，因为自己写的js优先级低于portal自带的，所以采用手动触发批量编辑的功能，实现如下： 1. 在subgrid List中插入一个按钮，点击后触发批量编辑功能 2. 点击后...
资源含括泛微流程表单中各种js脚本验证；包含文本框、单选框、复选框、明细表、显示属性、时间。水印等各类场景所用到的脚本近百种脚本
3.13 刷新时清空所有文本框 3.14 随意改变大小的文本框 3.15 文本框的自动全选 3.16 文本框滚动导航 3.17 按钮获取焦点 3.18 文本框获取焦点弹出下拉框 3.19 文本框简单的单击效果 3.20 文字的打字效果 3.21 文字...
3.13 刷新时清空所有文本框 3.14 随意改变大小的文本框 3.15 文本框的自动全选 3.16 文本框滚动导航 3.17 按钮获取焦点 3.18 文本框获取焦点弹出下拉框 3.19 文本框简单的单击效果 3.20 文字的打字效果 3.21 文字...
实例043 应用JavaScript实现指定尺寸无边框无滚动条窗口 67 1.8 水平导航条应用 69 实例044 图片按钮导航条 69 实例045 导航条的动画效果 71 实例046 不用图片实现质感导航条 72 1.9 下拉菜单式导航条 73 实例047 二...
7.10 文字在文本框中坠落 176 7.11 文字飞舞的效果 178 7.12 横向移动的跑马灯 181 7.13 可随便移动的文字 182 7.14 水波形的文字 183 7.15 首字母大小写的变化 184 7.16 状态栏文字飞出效果 186 7.17 链接...
绝对的经典javascript收藏 包含了各个种类的js校验实例 web开发绝妙帮手 <br>javascript收藏 1.页面校验 1.文本框约束输入 2.表单校验工具库 3.文本框部分内容不让改变 2.下拉框类 ...
使用JavaScript实现隔行变色 使用jQuery选择器实现隔行变色 JavaScript代码检测页面元素 jQuery代码检测页面元素 使用jQuery基本选择器 使用jQuery层次选择器 使用jQuery基本过滤选择器 使用jQuery内容过滤...
共10章，两个综合案例（图片切割，在线聊天室），118个示例（JavaScript隔行变色，jQuery选择器隔行变色，JavaScript输出文字信息，jQuery输出文字信息，基本选择器选择元素，层次选择器选择元素，基本过滤选择器...
主要为大家详细介绍了javascript特殊文本输入框网页特效,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
9.JS精简网页音乐播放器 浮动在页面顶部像工具栏 10.超强JS网页版泡泡龙游戏下载 11.兼容各浏览器JS+CSS水平和垂直无缝图片滚动效果代码 12.漂亮暖色调js+flash平滑过渡大屏图片切换的广告代码 13.实用国外...
实例代码： 第1章（\cha01） ...第2章（\cha02） ...第3章（\cha03） ... 3.3.htm 用对象的方式实现数组 ... 3.6.htm 实现多维数组 ... 4.5.htm 实现计算器 ... \36.2\ Default.aspx 实现文本聊天室
摘要:脚本资源,jQuery,文本框,自动换色 运行环境：HTML/PHP/ASP/