Question

好的，所以我正在创建一个搜索框，其值在点击时会消失，如果您点击搜索框，则会返回。与stackoverflow搜索类似，但如果单击关闭搜索，则值将返回。我希望我很清楚（我对javascript知之甚少）...但对于没有启用javascript的用户，我该如何将其作为空白输入？这是我的代码

<INPUT type="text" name="q" value="Search using Business Name or Category..." onFocus="if(this.value == 'Search using Business Name or Category...') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Search using Business Name or Category...';}" />

我想也许我应该做一个PHP，如果启用JavaScript，但我看起来，无法找到任何PHP脚本？任何帮助将不胜感激。

Answer 1

请使用placeholder属性！

<INPUT type="text" name="q" placeholder="Search using Business Name or Category..." value="" />

然后使用feature detection与JavaScript一起使占位符适用于不支持占位符属性的浏览器。

例如，使用Moderlizr和jQuery（未经测试）：

// Add placeholder support for browsers which don't support it.
// TODO Special styling.
if (!Modernizr.input.placeholder) {
    $('input[placeholder][value=]')
        .each(function () {
            var $this = this;

            $this.val($this.attr('placeholder'));
        })
        .focus(function () {
            var $this = this;

            if ($this.val() === $this.attr('placeholder')) {
                $this.val('');
            }
        })
        .blur(function () {
            var $this = this;

            if ($this.val() === '') {
                $this.val($this.attr('placeholder'));
            }
        });
}

Answer 2

使用JavaScript设置初始值（假设您有一个ID）：

// Somewhere near the bottom of your document
document.getElementById("q").value = "Search...";

我个人倾向于使用浮动在输入顶部的单独元素来做这样的事情，因为我认为修改它的值是一个肮脏的把戏。

如何确保此文本输入值在没有javascript的情况下工作？

2 个答案: