`

用jquery实现输入框消失文字

 
阅读更多
<html>
<head>
    <title>用jquery实现输入框消失文字</title>
    <style type="text/css">
        .default {
            font-weight: bold;
            color: #787878;
        }
    </style>
    <script type="text/javascript" src="/js/jquery/jquery-1.8.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#keywords").focus(function () {
                var $this = $(this);
                if ($this.val() == $this[0].defaultValue) {
                    $this.css("color","#0cf").val("");
                }
            }).blur(function () {
                var $this = $(this);
                if ($this.val() == "") {
                    $this.removeAttr("style").val($this[0].defaultValue);
                }
            })//keywords
        });
    </script>
</head>
<body>
<div id="content">
    <form method="POST" id="user" action="">
        User Name:<input type="text" id="keywords" class="default" name="keywords" value="Enter your name"/><br/>
        PassWord:<input type="text" id="password" class="default" name="password" value="Enter your password"/>
        <input type="submit" name="sub" value="login"/>
    </form>
</div>
</body>
</html>  






  • 大小: 13.4 KB
  • 大小: 18.4 KB
分享到:
评论

相关推荐

    用jquery实现输入框获取焦点消失文字

    总结来说,使用jQuery实现输入框获取焦点消失文字的功能,能够提升网页的交互性,使用户更容易理解输入框的预期用途。通过适当的优化,可以克服一些初始实现中的限制,提供更优秀的用户体验。在实际开发中,不断关注...

    jQuery插件EnPlaceholder实现输入框提示文字

    jQuery插件EnPlaceholder是一款用来为网页中的输入框添加提示文字功能的JavaScript插件。它允许开发者在HTML5的placeholder属性尚未被支持的浏览器中模拟这一功能,并且还扩展了此功能,可以应用于密码输入框。该...

    html5配合css3实现带提示文字的输入框

    为了创建带有提示文字的输入框,我们可以使用`placeholder`属性。这个属性允许我们在输入框内设置一段淡色的文本,当用户聚焦或输入内容时,这段文本会自动消失。以下是一个简单的HTML代码示例: ```html &lt;!DOCTYPE...

    jQuery实现的文本框输入文字后飞出消失动画效果源码.zip

    这个"jQuery实现的文本框输入文字后飞出消失动画效果源码.zip"压缩包文件,显然包含了一个特定的功能实现,即在用户在文本框(input[type="text"])中输入文字后,这些文字会以飞出消失的动画效果呈现。这种效果通常...

    jquery文本框显示描述文字rar

    在本主题中,我们关注的是一个特定的jQuery特效:在文本框(input)中显示描述文字,当用户开始输入时这些文字会消失。这个功能常见于许多表单设计中,用于提示用户输入内容的类型或者格式,提供更好的用户体验。 ...

    获取输入框内容设置输入框默认提示js插件

    使用这个插件,开发者可以通过简单的API调用来实现输入框的动态交互,例如初始化插件、监听输入框内容变化,或者改变默认提示。在实际应用中,这可以提升用户在填写表单时的体验,特别是在需要输入大量信息的场景下...

    jQuery实现IE输入框完成placeholder标签功能的方法

    标题中的“jQuery实现IE输入框完成placeholder标签功能的方法”指的是在Internet Explorer(特别是低版本如IE8及以下)中,由于这些版本不支持HTML5的`placeholder`属性,因此需要使用jQuery来模拟这一功能。...

    jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例

    文章主要介绍了如何使用jQuery来实现当input输入框获得和失去焦点时,提示信息的显示和隐藏。首先,对于不熟悉jQuery的读者,需要理解jQuery是一个快速、小巧、功能丰富的JavaScript库。它通过封装JavaScript常用的...

    jQuery实现的用户注册表单上方弹窗提示文字特效源码.zip

    在注册表单中,我们可以使用jQuery选择器来精确地定位到表单元素,如输入框、按钮等,然后绑定相应的事件处理函数,如`click`或`submit`。 对于表单验证,jQuery提供了丰富的功能来检查用户输入的有效性。例如,...

    jQuery输入文字弹幕显示动画特效.zip

    《jQuery输入文字弹幕显示动画特效》是一款基于JavaScript库jQuery实现的创新互动特效,它允许用户在限定的10个字符内输入个性化文字,并以弹幕形式动态展示出来,为网页增添趣味性和交互性。这一特效尤其适用于社交...

    jquery表单文本框添加文字标签.zip

    本教程将聚焦于如何使用jQuery在表单文本框中添加文字标签,这一功能对于提升用户界面的易用性和可读性至关重要。 首先,我们需要理解HTML5中的`&lt;input&gt;`元素,这是创建表单文本框的基础。例如,一个基本的文本...

    asp.net输入框特效

    4. **水印效果**:在输入框未被填写时显示提示文字,一旦用户开始输入,提示文字会消失。可以使用JavaScript或者jQuery插件实现。 5. **输入限制**:限制输入框能接受的字符类型或长度,例如只允许数字、字母,或者...

    input 标签实现输入框带提示文字效果(两种方法)

    如果需要实现跨浏览器兼容性,可以使用JavaScript库,如jQuery,来检测输入框的状态并动态显示或隐藏提示文字。以下是一个简单的例子: ```javascript $(document).ready(function() { $("#focus .input_txt")....

    jquery文字输入特效.zip

    例如,我们可以使用`$("#inputId").val()`来获取或设置输入框的值,`$("#inputId").focus()`则可以实现焦点切换,这些是构建文字输入特效的基础。 接下来,我们来看如何创建一个简单的文字输入提示效果。这通常用于...

    jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码

    为了提高用户体验,经常会在表单的输入框(`input`元素)内预设提示性文字,这些文字在用户未输入时显示,一旦用户聚焦输入框开始输入,提示文字应自动消失。jQuery是一个广泛使用的JavaScript库,它简化了DOM操作和...

    H5 输入框的提示信息

    如上例所示,`placeholder="请输入您的姓名"`会在输入框内显示“请输入您的姓名”,当用户开始输入或者聚焦在输入框时,该提示信息会自动消失。 2. CSS样式调整 有时我们可能需要自定义提示信息的样式,可以通过CSS...

    掩盖输入样式的漂亮的jquery登陆页面

    在描述中提到的“鼠标定位到输入框中,默认提示的文字消失”,这通常通过JavaScript或者jQuery的事件监听功能来实现,比如`focus`事件。当用户聚焦到输入框时,触发相应函数,清除或改变文本内容。而“或者移动到...

    jQuery实用小技巧_输入框文字获取和失去焦点的简单实例

    在本文中,我们将深入探讨jQuery中的实用小技巧,特别是关于输入框文字的获取和失去焦点时的处理。这个实例展示了如何在用户与输入框交互时动态改变文本内容,以提供更好的用户体验。 首先,我们看到HTML代码包含了...

Global site tag (gtag.js) - Google Analytics