我如何使一个HTML文本框显示空时提示?

我想在我的网页上的搜索框显示字“搜索”在灰色斜体。当框接收到焦点时，它看起来就像一个空文本框。如果其中已经有文本，则应该正常显示文本(黑色，非斜体)。这将帮助我避免混乱的标签。

顺便说一句，这是一个页面Ajax搜索，所以它没有按钮。

当前回答

我喜欢“知识奇库斯”的解决方案——简单明了。只需要在页面加载就绪时添加一个模糊调用，这将设置初始状态:

$('input[value="text"]').blur();

2012-01-11 02:48:25

其他回答

您可以使用HTML中的placeholder属性设置占位符(浏览器支持)。可以使用CSS更改字体样式和颜色(尽管浏览器支持有限)。

input[type=search]:::-webkit-input-placeholder {/* Safari, Chrome(， Opera?) */ 颜色:灰色; 字体样式:斜体; ｝ input[type=search]:-moz-placeholder {/* Firefox 18- */ . txt 颜色:灰色; 字体样式:斜体; ｝ input[type=search]::-moz-占位符{/* Firefox 19+ */ 颜色:灰色; 字体样式:斜体; ｝ input[type=search]:-ms-input-placeholder {/* IE (10+? 颜色:灰色; 字体样式:斜体; ｝ <input placeholder="Search" type=" Search" name="q">

2010-07-21 19:07:27

简单的Html 'required'标签是有用的。

<form>
<input type="text" name="test" id="test" required>
<input type="submit" value="enter">
</form>

它指定在提交表单或按submit按钮之前必须填写输入字段。这里有一个例子

2016-06-07 04:59:26

我使用了一个简单的，一行javascript解决方案，它的工作很棒。这里有一个文本框和文本区域的例子:

    <textarea onfocus="if (this.value == 'Text') { this.value = ''; }" onblur="if (this.value == '') { this.value = 'Text'; }">Text</textarea>

    <input type="text" value="Text" onfocus="if (this.value == 'Text') { this.value = ''; }" onblur="if (this.value == '') { this.value = 'Text'; }">

唯一的“缺点”是在对字段值做任何事情之前在$_POST或Javascript验证中进行验证。意思是，检查字段的值是不是“Text”。

2020-05-03 04:24:03

下面是一个带有谷歌Ajax库缓存和一些jQuery魔法的函数示例。

这将是CSS:

<style type="text/stylesheet" media="screen">
    .inputblank { color:gray; }  /* Class to use for blank input */
</style>

这将是JavaScript代码:

<script language="javascript"
        type="text/javascript"
        src="http://www.google.com/jsapi">
</script>
<script>
    // Load jQuery
    google.load("jquery", "1");

    google.setOnLoadCallback(function() {
        $("#search_form")
            .submit(function() {
                alert("Submitted. Value= " + $("input:first").val());
                return false;
        });

        $("#keywords")
            .focus(function() {
                if ($(this).val() == 'Search') {
                    $(this)
                    .removeClass('inputblank')
                    .val('');
                }
            })
            .blur(function() {
                if ($(this).val() == '') {
                    $(this)
                    .addClass('inputblank')
                    .val('Search');
                }
            });
    });
</script>

这就是HTML:

<form id="search_form">
    <fieldset>
        <legend>Search the site</legend>
            <label for="keywords">Keywords:</label>
        <input id="keywords" type="text" class="inputblank" value="Search"/>
    </fieldset>
</form>

我希望这足以使您对GAJAXLibs和jQuery产生兴趣。

2008-09-20 15:12:10

可以使用占位符=""属性下面是一个演示:

<html>
<body>
// try this out!
<input placeholder="This is my placeholder"/>
</body>
</html>

2020-11-04 18:12:58

我如何使一个HTML文本框显示空时提示?

推荐文章

最新文章

标签