[英]How can I continually detect if the focus is set? (Javascript, jQuery)
I'm very new to Javascript (and jQuery). 我对Javascript(和jQuery)非常陌生。 My JSFiddle really shows the issue in the best way possible.
我的JSFiddle确实以最好的方式显示了该问题。 http://jsfiddle.net/mkLsr/3/
http://jsfiddle.net/mkLsr/3/
I'm trying to make it so a search box text input that is focused upon page load, so a user can type into it without clicking into it. 我正在尝试使其成为一种专注于页面加载的搜索框文本输入,以便用户无需单击即可输入。 However, I also want default text in it that will disappear when the user clicks into the text input and re-appears if they click out of the text field without writing anything.
但是,我还希望其中包含默认文本,这些默认文本将在用户单击文本输入时消失,并且如果他们从文本字段中单击而未写任何内容,则会重新出现。
The problem is that I have other text inputs on the page, and as it is running now, if a user clicks onto one and begins typing, the focus jumps to the originally focused text input. 问题是我在页面上还有其他文本输入,并且由于它现在正在运行,如果用户单击一个并开始键入,则焦点将跳到最初聚焦的文本输入上。 How can I stop this from happening?
我该如何阻止这种情况的发生?
I tried using if ($('input:focus').size() == 0)
to make it so it would only set the focus if no other focus has been set. 我尝试使用
if ($('input:focus').size() == 0)
来制作它,因此它只会在没有设置其他焦点的情况下设置焦点。 Does it not work because it doesn't re-check after the page loads? 页面加载后不进行重新检查是否不起作用? How can I get it to re-check, or is there some other problem?
我该如何重新检查,还是有其他问题?
I think that a search box that you can automatically type into, that has a default text that is erased upon typing, is about as user friendly as you can get - but I'm really hoping to do it without expense to other input's user-friendliness. 我认为您可以自动输入的搜索框具有默认的文字,该文字在输入时会被删除,因此它会尽可能地方便用户使用-但我真的希望这样做不会给其他输入的用户带来费用-友善。
Any help would be appreciated! 任何帮助,将不胜感激!
* EDIT * *编辑*
Kai really helped me out with his Javascript solution and use of the "placeholder" HTML attribute. Kai确实通过他的Javascript解决方案和对“占位符” HTML属性的使用帮助了我。 ( http://jsfiddle.net/wgwTC/4/ ).
( http://jsfiddle.net/wgwTC/4/ )。
I'm just curious if someone knows how to apply it cross-browser so that the first text input is in focus still, but the placeholder text is there upon loading the page. 我只是很好奇,如果有人知道如何跨浏览器应用它,以便第一个文本输入仍然处于焦点位置,但是在加载页面时就存在占位符文本。 Currently it works in Chrome, but not IE (I'm using 9) or Firefox (5.0).
目前,它可以在Chrome中运行,但不能在IE(我使用的是9)或Firefox(5.0)上运行。 If there's a cross-browser solution, it may help others who want the same or similar functionality on future projects.
如果有跨浏览器的解决方案,它可能会帮助希望在未来项目中使用相同或相似功能的其他人。
Here's a solution that uses the placeholder
attribute but will fallback to JS for IE <= 9: (See http://jsfiddle.net/wgwTC/2/ for working example): 这是一个使用
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 = '';
}
});
}
I think this does what you're asking (assuming I understand you correctly). 我认为这符合您的要求(假设我正确理解了您的意思)。
Here's the fiddle: http://jsfiddle.net/jVvX3/2/ 这是小提琴: http : //jsfiddle.net/jVvX3/2/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.