jS实现文本框在点击时变色

最新推荐文章于 2020-12-30 11:08:14 发布
最新推荐文章于 2020-12-30 11:08:14 发布
阅读量236 收藏
点赞数
文章标签： javascript xhtml ViewUI
原文链接：http://www.cnblogs.com/lizonghai/p/4639775.html
版权

                                             jS实现文本框在点击时变色

  • 网页上默认的文本框老是灰色风格，看的都有点不耐烦了，用CSS和JS改变其样式是大家都喜欢用的方法，今天写了一个点击边框变色的文本框，鼠标点击文本框将要输入的时候，文本框自动变色高亮显示，非常有视觉效果，让文本框变漂亮了许多。HTML代码如下：

    01<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    02<html xmlns="http://www.w3.org/1999/xhtml">
    03<head>
    04<meta http-equiv="Content-Type" content="textml; charset=utf-8" />
    05<title>输入框点击时边框变色效果</title>
    06</head>
    07<body>
    08<script type="text/javascript">
    09// focusClass : 获取焦点时的样式
    10// normalClass : 正常状态下的样式
    11function focusInput(focusClass, normalClass) {
    12    var elements = document.getElementsByTagName("input");
    13    for (var i=0; i < elements.length; i++) {
    14        if (elements[i].type != "button" && elements[i].type != "submit" && elements[i].type != "reset") {
    15            elements[i].onfocus = function() { this.className = focusClass; };
    16            elements[i].onblur = function() { this.className = normalClass||''; };
    17        }
    18    }
    19}
    20</script>
    21<script type="text/javascript">
    22window.onload = function () {
    23    focusInput('focusInput', 'normalInput');
    24}
    25</script>
    26请输入姓名：<input type="text" class="normalInput" />
    27<style type="text/css">
    28.normalInput {border:1px solid #ccc;}
    29.focusInput {border:1px solid #FFD42C;}
    30</style>
    31</body>
    32</html>

    在火狐下也有效，只不过火狐和chrome下，这两款浏览器默认会自动会输入框添加点击效果，所以有时候看不清，IE下表现突出。

转载于:https://www.cnblogs.com/lizonghai/p/4639775.html

weixin_30384217
关注
html表单点击变色如何实现,表单特效 鼠标经过或选中input变色
weixin_30613479的博客
06-21 3889
今天来说说对input输入框在处理上的细节处理和心得，其实制作一个符合CSS标准、FF/IE7/IE6等主流浏览器全兼容、符合用户体验的input其实并不难。先点击看看下面的效果先！以下是代码片段：htmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt...
输入框点击时边框变色效果的实现方法
08-31
下面小编就为大家带来一篇输入框点击时边框变色效果的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦
JS控制输入框外边框focus后变红
weixin_34220179的博客
10-31 720
JS控制输入框以红色作为验证提示，遇到两个问题： select标签和input标签有区别 focus后变红再恢复时，不好恢复到之前的带有阴影的蓝边框 解决方案： 第一种写法 function focusChangeBorder( id ) { var editElem = $("#" + id); if (editEl...
JavaScript实现点击指定选项文字变红其他选项文字不变色
爱酷码的博客
12-30 2468
点击哪个h1标签让哪个字体变成红色（使用this） 代码如下 <body> <h1 onclick="z(this)">张三</h1> <h1 onclick="q(this)">李四</h1> <h1 onclick="r(this)">王五</h1> </body> <script> function z(z) { z.style.color="red"; .
JS的一些简单应用 —— 边框点击变色
烟敛寒林的博客
05-19 6118
原本紫蓝色的框，为何点击方框内任意位置换成红色？ 代码如下： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;style&gt; div{ width: 300px;
前台实现文本框中c#关键字变色及提示
08-17
本资源包提供了一个解决方案，它包含三个JavaScript文件和一个HTML文件，用于在前端实现C#关键字变色以及输入时的关键字提示功能，非常适合在线编译器或代码编辑器的开发。 首先，我们要理解C#是一种面向对象的编程...
鼠标经过的文本框textbox变色
12-01
JS文件： 代码如下:function mouseAction() { var textInputs = document.getElementsByTagName(“input”); var len = textInputs.length; var index = 0; var textInput; /* 也能用 for in 语句遍历 for (text...
文本框获得焦点改变背景颜色.html
08-13
文本框获得焦点改变背景颜色，HTML，JAVASCRIPT,CSS，做网页前台的时候看一看
js文本框聚焦边框变色
weixin_30660027的博客
03-07 607
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8...
如何将文本框变红和js加载css的方法
wenchenyang的专栏
03-21 603
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt; &lt;/title&gt; &lt;!--设置文本框的边框颜色和样式--&gt; &
JQuery实现点击文本框等时背景变颜色
Zool_happy的专栏
05-10 7073
<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br />    <title></title><br />    <style type ="text/css" ><br />  
文本框内容为空时 边框变为红色。js控制文本框的class
zhi0326的专栏
02-28 2678
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt; &lt;/title&gt; &lt;!--设置文本框的边框颜色和样式--&gt; &lt;style type
js动态设置输入框字体/颜色
热门推荐
王小磊
10-24 1万+
[html] view plaincopy 动态设置文本框颜色：   [html] view plaincopy 主要是利用javascript中的触发事件onfocus和onblur      script language="javascript" type="text/javascript">        
JavaScript技巧集锦：文本框焦点、按钮样式与窗口控制
`onfocus` 事件在用户点击文本框并开始输入时触发，而 `onBlur` 则在用户离开文本框时发生。示例代码中，当文本框值为 "mm" 时，点击会使其清空；失去焦点时，又会恢复到原始值 "mm"，实现简单的交互效果。 2. **...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值