jquery改变文本框颜色

最新推荐文章于 2022-02-28 19:19:39 发布
最新推荐文章于 2022-02-28 19:19:39 发布
阅读量2.3k 收藏 2
点赞数
文章标签： javascript xhtml ViewUI 
<!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 runat="server">  
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>  
    <style type="text/css">  
        body  
        {  
            font: normal 12px/17px Arial;  
        }  
        div  
        {  
            padding: 2px;  
        }  
        input, textarea  
        {  
            width: 12em;  
            border: 1px solid #888;  
        }  
        .focus  
        {  
            border: 1px solid #f00;  
            background: #fcc;  
        }  
    </style>  
    <script src="jquery-1.7.1.min.js" type="text/javascript"></script>  
    <script type="text/javascript">  
        $(function () {  
            $("input").focus(function () {  
                $(this).addClass("focus");  
            }).blur(function () {  
                $(this).removeClass("focus");  
            });  
        });  
    </script>  
</head>  
<body>  
    <form id="form1" runat="server">  
    <fieldset>  
        <legend>个人基本信息</legend>  
        <div>  
            <label for="username">  
                名称:</label>  
            <input id="username" type="text" />  
        </div>  
        <div>  
            <label for="pass">  
                密码:</label>  
            <input id="pass" type="password" />  
        </div>  
        <div>  
            <label for="msg">  
                详细信息:</label>  
            <textarea id="msg" rows="2" cols="20"></textarea>  
        </div>  
    </fieldset>  
    </form>  
</body>  
</html>

 

weixin_34179762
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Jquery文本框变色
weixin_34055787的博客
07-22 536
Jquery文本框变色 css样式： <style type="text/css"> body{ font:normal 12px/17px Arial; } div{ padding:2px; } input, textarea { width: 12em; border: 1px solid #888; } ....
jquery学习之-设置正在编辑文本框背景色
wensummer的代码之旅
04-24 2395
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> InputChangeBack .line{  width:500px
通过jQuery更改css样式中边框颜色
m0_46680765的博客
07-08 2998
拿底部边框举例： (".layui−this").css("border−bottom−color","red");误区：1、(".layui-this").css("border-bottom-color","red"); 误区： 1、(".layui−this").css("border−bottom−color","red");误区：1、(".layui-this").css(“border-bottom”,“red 1px solid”); 2、$(".layui-this").css(“borde
如何修改jquery easyui select中option背景颜色
cillent_boy的专栏
06-12 1754
<input type="radio" name="b_group" value="2">模板颜色：<select class="easyui-combobox" name="state" style="width:200px;" data-options="textField: 'text', formatter: ...
jquery 修改input边框和背景颜色
li836779537的博客
01-06 3074
代码： <input id="aaa" name="bbb" class="ccc" "/> 这里的 $(".ccc")也可以换 $("#aaa") ，哪种方式都可以。 if($(".ccc").val() == 0){ $(".ccc").css("border-color","red");//边框颜色 $(".ccc").css("background-color","#FCF2AD");//背景颜色 } 效果图： ...
css+jquery美化文本框，选择框
11-11
1. **基本样式设置**：首先，可以通过设置`border`, `padding`, `margin`, `font-size`等属性来改变文本框的边框、内填充、外边距和字体大小。例如： ```css input[type="text"] { border: 1px solid #ccc; ...
jquery表单文本框添加文字标签
11-11
本文将深入探讨如何使用 jQuery 在表单文本框中添加文字标签，以提升用户界面的易用性和美观性。 首先，我们需要理解HTML中的表单元素，特别是`<input>`标签，它是用来创建表单输入字段的基本元素。通常，一个文本...
jQuery文本框创建关键词标签代码
06-10
通过jQuery，我们可以根据需求改变标签的可编辑状态，例如设置`disabled`属性或移除事件监听器。 6. **禁用创建标签**： 当系统处于特定状态或用户无权限时，可能需要禁用创建新标签的功能。这可以通过监听文本框...
JQuery设置文本框和密码框得到焦点时的样式
12-02
`addClass("myFocus")` 方法向匹配元素添加名为`myFocus`的CSS类，这通常会在CSS文件中定义，以改变元素的样式，如边框颜色、背景色、字体样式等，使得用户可以直观地感知到当前哪个输入框处于活动状态。而`...
jQuery计算文本框可输入字数特效代码
03-20
5. **样式处理**：为了提高用户体验，还可以根据剩余字数的多少来改变提示文字的颜色或样式，例如，当字数接近限制时，可以变为红色警告用户。 在提供的压缩包中，"使用帮助.txt"可能包含了关于如何部署和使用这个...
JQuery实现点击文本框等时背景变颜色
Zool_happy的专栏
05-10 7037
<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 />  
JQuery效果——如何切换图片颜色
m0_51074727的博客
10-08 816
1、jquery代码： $(function () { ///鼠标移上去小图变大图 $(".imgList li img").bind("mouseover click", function () { var src = $(this).attr("src");///获取鼠标当前点击的img图片src属性 var bigimgjq = src.replace(".jpg", "_big.jpg");////把".jpg"替换为 "_one_big.jpg"
jquery实现点击按钮循环变色功能的3种方式
just_learing的博客
02-28 3079
点按钮换色 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .changeRed{ background-color:red; } </style> </head> <body> <ul> <li &gt
html 改变input触发边框颜色
热门推荐
木子小姐
07-23 3万+
//去掉input点击后边框颜色 input { outline:none; } //改变input触发后边框颜色 input{ outline-color:red;}
jquery td 点击改变颜色
trigfj的博客
01-26 800
jquery td 点击改变颜色
<!--（一）验证二次输入密码一致。要求： (本题15分） 1、输入框获得焦点时改变输入框背景色（颜色自定义），失去焦点后恢复原颜色。 2、密码由数字和大小写字母中至少二种组成，长度为6至10位，密码输入后以“*”号显示， 输入完成后输入框失去焦点时，用正则表达式进行判断密码形式是否满足要求， 输入有误时在输入框后面显示输入密码类型或长度错误。 3、从二个文本框中输入密码一致时，用警告框提示验证通过，否则提示不通过； 4、验证三次密码不一致时，验证按钮禁用3分钟，3分钟之后解除禁止。 5、使用jQuery完成本题。-->完成上述要求，并用js,jquery代码完成
最新发布
06-09
以下是HTML代码： ```html <label for="pwd1">密码：</label> <input type="password" id="pwd1" name="pwd1"><br> <label for="pwd2">确认密码：</label> <input type="password" id="pwd2" name="pwd2"><br> <button id="btn">验证</button> <div id="error"></div> ``` 以下是jQuery代码： ```javascript $(document).ready(function(){ var pwd1 = $("#pwd1"); var pwd2 = $("#pwd2"); var btn = $("#btn"); var error = $("#error"); var errorTimer; // 定时器 // 输入框获得焦点时改变输入框背景色 pwd1.focus(function(){ $(this).css("background-color", "#f5f5f5"); }); pwd2.focus(function(){ $(this).css("background-color", "#f5f5f5"); }); // 输入框失去焦点后恢复原颜色 pwd1.blur(function(){ $(this).css("background-color", "#fff"); }); pwd2.blur(function(){ $(this).css("background-color", "#fff"); }); // 输入完成后输入框失去焦点时，用正则表达式进行判断密码形式是否满足要求 pwd1.blur(function(){ var pattern = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,10}$/; // 密码由数字和大小写字母中至少二种组成，长度为6至10位 var pwd = $(this).val(); if(!pattern.test(pwd)){ error.html("密码必须由数字和大小写字母中至少二种组成，长度为6至10位"); $(this).val(""); } }); // 从二个文本框中输入密码一致时，用警告框提示验证通过，否则提示不通过 btn.click(function(){ var pwd1Val = pwd1.val(); var pwd2Val = pwd2.val(); if(pwd1Val === pwd2Val){ alert("验证通过"); }else{ error.html("两次输入的密码不一致"); pwd1.val(""); pwd2.val(""); // 验证三次密码不一致时，验证按钮禁用3分钟 btn.prop("disabled", true); errorTimer = setTimeout(function(){ btn.prop("disabled", false); }, 180000); } }); }); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值