输入错误后显示红色

输入错误后显示红色

输入错误后显示红色,但是纠正后还会显示红色

正在回答

登陆购买课程后可参与讨论,去登陆

4回答

同学你好,这里可以如果实现错误删除,继续输入正确字符,显示正确,可以使用如下内容在来试一下:

当按钮被松开时,发生 keyup 事件,此时获取到当前的内容,判断是否有空格

http://img1.sycdn.imooc.com//climg/5dbab2240940f94d05150177.jpg

$("input[name='uname']").val()-->获取到这个文本框中的内容

uString.indexOf(" ")!= -1--> uString存在空格,css样式中颜色变为红色,否则就是没有空格,变为黑色。

如果我的回答解决了你的疑惑,请采纳。祝:学习愉快~

好帮手慕小班 2019-10-30 19:41:04

同学你好,1、keypress是按键按下时,触发的事件,在这个事件中不会被所有按键触发,比如ALT、CTRL、SHIFT、ESC、Backspace(退格键)是不会触发这个事件的。

    2、所以同学可以在这段代码中添加:

http://img1.sycdn.imooc.com//climg/5db9764a091340b605430182.jpg

输入错误后显示红色,但是删除错误内容,重新输入正确的字符,进入else中,文本框内会重新变为黑色。

如果我的回答解决了你的疑惑,请采纳,祝学习愉快~

  • 提问者 黑不溜溜球 #1
    如果错误没删除而是继续输入正确字符的话,它还会变黑
    2019-10-31 15:31:21
  • 提问者 黑不溜溜球 #2
    如果错误没删除而是继续输入正确字符的话,它还会变黑
    2019-10-31 15:31:21
提问者 黑不溜溜球 2019-10-30 18:48:20
<!DOCTYPE html >

<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery实验室</title>

<style>
.myclass {
    font-style: italic;
    color: darkblue;
}
/* 高亮css类 */
.highlight {
    color: red;
    font-size: 30px;
    background: lightblue;
}
</style>

</head>

<body>
    <div class="section">
        <h2>jQuery选择器实验室</h2>
        <input type="text" style="height: 24px" id="txtSelector" />
        <button id="btnSelect" style="height: 30px">选择</button>
        <hr />
        <div>
            <p id="welcome">欢迎来到选择器实验室</p>
            <ul>
                <li>搜索引擎:<a href="http://www.baidu.com">百度</a> <span> <a
                        style="color: darkgreen" href="http://www.so.com">360</a>
                </span>
                </li>
                <li>电子邮箱:<a href="http://mail.163.com">网易邮箱</a> <span> <a
                        style="color: darkgreen" href="http://mail.qq.com">QQ邮箱</a>
                </span>
                </li>
                <li>中国名校:<a href="http://www.tsinghua.edu.cn">清华大学</a> <span>
                        <a style="color: darkgreen" href="https://www.pku.edu.cn/">北京大学</a>
                </span>
                </li>
            </ul>

            <span class="myclass ">我是拥有myclass类的span标签</span>

            <p class="myclass">我是拥有myclass的p标签</p>
            <form id="info" action="#" method="get">
                <div>
                    用户名:<input type="text" name="uname" value="admin" /> 密码:<input
                        type="password" name="upsd" value="123456" />
                </div>
                <div>
                    婚姻状况: <select id="marital_status">
                        <option value="1">未婚</option>
                        <option value="2">已婚</option>
                        <option value="3">离异</option>
                        <option value="4">丧偶</option>
                    </select>
                </div>
                <div class="left clear-left">
                    <input type="submit" value="提交" /> <input type="reset" value="重置" />
                </div>
            </form>
        </div>
    </div>
    <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        $("p.myclass").on("click",function(){
            $(this).css("background","yellow");
        });
        $("span.myclass").click(function(){
            $(this).css("background","yellow");
        });
        $("input[name='uname']").keypress(function(event) {
            if(event.keyCode == 32){
                $(this).css("color","red");
            }
        });
    </script>
</body>
</html>


好帮手慕小班 2019-10-30 18:04:37

同学你好,纠正后报红,还有其他错误信息吗,建议同学将自己的代码以及报错信息贴出,老师来测试一下。

如果我的回答解决了你的疑惑,请采纳,祝学习愉快~

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师