1

我对 Javascript（和 jQuery）很陌生。我的 JSFiddle 确实以最好的方式显示了这个问题。http://jsfiddle.net/mkLsr/3/

我试图使它成为一个专注于页面加载的搜索框文本输入，因此用户可以在不点击的情况下输入它。但是，我还希望其中的默认文本在用户单击文本输入时消失，如果他们在没有写任何内容的情况下单击文本字段，则会重新出现。

问题是我在页面上有其他文本输入，并且现在正在运行，如果用户单击一个并开始输入，焦点会跳转到最初聚焦的文本输入。我怎样才能阻止这种情况发生？

我尝试使用if ($('input:focus').size() == 0)它，所以它只会在没有设置其他焦点的情况下设置焦点。它不起作用是因为它在页面加载后没有重新检查吗？我怎样才能让它重新检查，还是有其他问题？

我认为您可以自动输入的搜索框，其默认文本在输入时会被删除，这与您可以获得的用户友好度差不多 - 但我真的希望在不花费其他输入用户费用的情况下做到这一点 -友善。

任何帮助，将不胜感激！

* 编辑*

Kai 的 Javascript 解决方案和“占位符”HTML 属性的使用确实帮助了我。（http://jsfiddle.net/wgwTC/4/）。

我只是好奇是否有人知道如何跨浏览器应用它，以便第一个文本输入仍然是焦点，但占位符文本在加载页面时就在那里。目前它适用于 Chrome，但不适用于 IE（我使用的是 9）或 Firefox（5.0）。如果有一个跨浏览器解决方案，它可能会帮助其他想要在未来项目中使用相同或类似功能的人。

4

2 回答 2

1

这是一个使用该placeholder属性但将回退到 IE <= 9 的 JS 的解决方案：（有关工作示例，请参见http://jsfiddle.net/wgwTC/2/ ）：

// Focus on this box by default
$('#header-search-box').focus();

// Support placeholder text for IE <= 9 (which doesn't support placeholder attribute)
if ( $.browser.msie && (parseInt($.browser.version, 10) <= 9) ) {
    $('input[name=search]').attr('value', 'Search New Equipment...');

    // Set placeholder text on blur
    $('input[name=search]').on('blur', function (e) {
        if (!e.currentTarget.value.length) {
            e.currentTarget.value = 'Search New Equipment...';
        }
    });    

    // Clear placeholder text on focus
    $('input[name=search]').on('focus', function (e) {
        if (e.currentTarget.value === 'Search New Equipment...') {
            e.currentTarget.value = '';
        }
    });
}
于 2012-06-13T18:52:16.703 回答
0

我认为这可以满足您的要求（假设我理解正确）。

这是小提琴：http: //jsfiddle.net/jVvX3/2/

于 2012-06-13T18:56:19.867 回答