Question

我有一个HTML页面。我想在文本框上实现水印功能，但它无法正常工作。不知道原因，我试过很多东西但不能。请参阅我的代码供您参考：

  <style type="text/css">
    input.watermark {
        color: #999;
    }

    //light silver color
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script language="JavaScript">
    $(document).ready(function () {
        var watermark = 'Puts your text here';
        $('#txtNameWaterMark').val(watermark).addClass('watermark');
        //if blur and no value inside, set watermark text and class again.
        $('#txtNameWaterMark').blur(function () {
            if ($(this).val().length == 0) {
                $(this).val(watermark).addClass('watermark');
            }
        });
        $('#txtNameWaterMark').focus(function () {
            if ($(this).val() == watermark) {
                $(this).val('').removeClass('watermark');
            }
        });
    });
</script>

另外，请找到文本框的HTML供您参考： -

<div class="contacttext">
<div class="errors">
    <ul></ul>
</div>
<div class="contactMain">
    <div class="contactName">Name</div>
    <div class="contactformfield">
        <!--<input name="txtName" type="text" class="textboxEffect" id="txtName" value="" /><span class="errortext">*</span> -->

        <input type="text" id="txtNameWaterMark" class="textboxEffect" /><span class="errortext">*</span>
    </div>
    <div id="nameError" class="red">&nbsp;</div>
    <div class="clear"></div>

    <div class="contactName">Contact</div>
    <div class="contactformfield">
        <input name="txtName" type="text" id="txtNameWaterMark2" value="Enter Your Name" class="textboxEffect" />
    </div>
    <div class="clear"></div>

    <div class="contactName">Email</div>
    <div class="contactformfield">
        <input name="txtName" type="text" value="Enter Your Name" class="textboxEffect" />
    </div>
    <div class="clear"></div>

    <div class="contactName">Comments</div>
    <div class="contactformfield">
        <textarea name="" cols="" rows="" class="txtarea-postnow"></textarea>
    </div>
    <div class="clear"></div>
    <br />

    <div class="contactName">&nbsp;</div>

    <div class="contactformfield">
        <input type="submit" name="save" value="Submit" class="button" />
        <input type="button" name="btnReset" value="Reset" id="btnReset" class="button" />
    </div>
</div>

</form>

Answer 1

正如评论中所讨论的那样，你真的不需要jquery作为输入/ textareas有占位符属性：

<input type="text" id="txtNameWaterMark" class="textboxEffect" placeholder="Placeholder text here..." />

Demo

现在，如果您必须支持old browsers，polyfill要使该属性能够通过jquery执行此操作，那就太过分了。

Answer 2

AS Patsy Issa在评论中指出，您可能希望使用HTML5 占位符属性而不是手工制作的jquery函数：

<input type="text" id="txtNameWaterMark" class="textboxEffect" placeholder="whatever text you want" />

这主要是支持的，除了老IE（多么令人惊讶！）。不过，由于您已经在页面上使用了jQuery，因此可以使用支持每个浏览器支持的jQuery plugin：

<input type="text" name="name" placeholder="e.g. John Doe">
<input type="email" name="email" placeholder="e.g. address@example.ext">
<input type="url" name="url" placeholder="e.g. http://mathiasbynens.be/">
<input type="tel" name="tel" placeholder="e.g. +32 472 77 69 88">
<input type="password" name="password" placeholder="e.g. h4x0rpr00fz">
<input type="search" name="search" placeholder="Search this site…">
<textarea name="message" placeholder="Your message goes here"></textarea>

<script type="text/javascript">
    $('input, textarea').placeholder();
</script>

Jquery Watermark无法在HTML页面中工作

2 个答案: