文本框文本域提示自动显示隐藏jQuery小插件实例页面

最新推荐文章于 2023-07-05 11:34:00 发布

转载最新推荐文章于 2023-07-05 11:34:00 发布 · 1.6k 阅读

文章标签：

#jquery #border #class #function #html #css

Web 同时被 2 个专栏收录

109 篇文章

订阅专栏

JavaScript

101 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的文本框提示信息自动隐藏与显示的方法。通过简单的CSS样式及HTML结构，结合JavaScript代码，实现了不同场景下文本框提示信息的变化效果，包括基本的提示切换、边框颜色变化以及输入文本颜色的改变。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章引自：http://www.zhangxinxu.com/study/201006/text-remind-auto-hide-show.html

最简单的切换

外带class的切换

改变显示的颜色

代码

CSS代码：

.textarea{border:1px solid #bbb; width:550px; height:80px;}
.border{border:1px solid #34538b;}

HTML代码：

<h4>最简单的切换</h4>
<p><input class="remindAuto" type="text" size="45" value="请出入姓名" /></p>
<p><textarea class="textarea remindAuto">内容不少于300字</textarea></p>
<h4>外带class的切换</h4>
<p><textarea class="textarea borderChange">变换边框颜色</textarea></p>                
<h4>改变显示的颜色</h4>
<p><input id="textColorChg" type="text" size="45" value="请输入日期..." /></p>

JS代码：

$(function(){
    $(".remindAuto").textRemindAuto();
    $(".borderChange").textRemindAuto({chgClass: "border"});
    $("#textColorChg").textRemindAuto({
        focusColor: "red"								  
    });
});;