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

Posted 2023-05-08

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

【英文标题】：How to make sure this text input value works without javascript?

【发布时间】：2011-06-20 09:06:12

【问题描述】：

好的，所以我正在制作一个搜索框，它的值会在点击时消失，如果您点击离开搜索框，则会返回。与 *** 搜索类似，但如果您单击搜索，则该值会返回。我希望我很清楚（我对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...';" />

我认为如果启用了 javascript，也许我应该做一个 php，但我查看并找不到任何 php 脚本？任何帮助将不胜感激。

【参考方案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'));
            
        );

【讨论】：

我什至不知道这个属性！ (+1)

关闭 - 您需要将 $('input[placeholder][value=]').each(...) 和 $('input[placeholder]').focus(...).blur(...) 分开，以便即使在那些具有默认值的字段上也能正确设置行为...

@Stobor，为简单起见，我明确省略了使用默认值处理文本框。另一方面，可以使用拆分解决方案$.fn.live，从 DOM 的角度来看，这可能更高效、更干净。用户可以根据他们的需要调整我的解决方案；我只是提供如何解决问题的示例。

【参考方案2】：

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

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

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