Okay, so for our app we have a sidebar with a long list of all the different pages available to that current user. At the top of the sidebar is an input which, using Javascript, only shows options on the sidebar that contains the word(s) they searched for.
Is there any way of achieving this without actually having an input, or using a hidden input?
I want it so when the user types, as long as they aren't focused onto another input/textarea/whatever, it refines the sidebar. I'm not sure if you've seen the new MySpace but that's exactly what I'm going for.
Here is a quick example to point you in the right direction. Every time a key is pressed the event is checked to see if it was activated in an input. If not the character code is logged to the console.
$('body').on('keypress', function(e) {
if ($(e.target).is('input')) {
return;
}
console.log(e.which);
});
Listen to the keypress event on document. Then get the target from the event to determine if it's an input or similar.
$(document).keypress(function(event) {
if ($(event.target).is('input')) {
return;
}
event.preventDefault();
});
Take a look at the jQuery Hotkeys plugin.
Related
The user needs to press the key X for the function to run and it works perfectly where there is a physical keyboard but how can I force a virtual keyboard on the mobile version? I can't think of a way to do this without adding an input field.
document.addEventListener("keyup", function(event) {
if (event.keyCode === 88) {
newx();
}
});
function newx()
{alert("Hello");
}
<h1>Key in X</h1>
The repl I'm using this for -> https://home.ajkallivayalil.repl.co/
After some searching on Google, I came up with this, but I suggest you make another user experience, as #95faf8e76605e973 said. (e.g. a button)
If you have some sort of input field and make it hidden, like using display: none or visibility: hidden, you can use JavaScript to activate it anytime, thus bringing up a keyboard.
To do this, you just have to use .focus() on your element.
A link to the SO page I found.
I am having a little confusion in jquery regarding an onchange event of a text box. I am having a text box and a small jquery snippet to detect if the user has pasted something:
$("#testid").bind("paste",function(){ do something.})
Is there any function like paste which detects whenever there is a change in the text box? i.e, when a user inputs something, immediately call a function (not on submit), and do something. Any help is appreciated
Use .change function.
$("#testid").change(function(){
//do something.
});
This works, if
user pastes something
user types
user deletes text
into/from the textbox. Globally, when textbox's value changes.
Jquery Documentation
You can use this. also check JSFiddle attached.
$("#txtBox").on('change', function(e){
alert('txtBox has changed: ' + $(this).val());
});
http://jsfiddle.net/AUSd6/
If you using latest jquery library, below script can be helpfull
$( "#testid" ).on( "change", function() {
//do something.
});
For Detail visit http://api.jquery.com/on/
Following are 3 methods those are very helpful if you have to detect changes as soon as user presses keys on keyboard. Keydown,Keypress,Keyup
Keydown--> would be called when your keyboard key is down.
Keyup --> called when user leaves the key after typing the character.
keypress--> is called as soon as user press the key on the keyboard.
There is change method also but this is called when someone after typing the word in textbox or any field clicks any place on the page or moves to next input field.
here is code how to use them.
$("#yourcontrolId").keyup(function(){
});
similarly you can use others 2 as well. every function have two overloaded versions
I'm making a widget that slides in and out of view on hover with showTracker and hideTracker functions. I want to prevent it from sliding out of view if it contains a focussed form element though, so I've got this going:
function hideTracker(){
if($('#tracker').find(':focus').length == 0){
$('#tracker').stop().hide();
}
}
Cool. Now it doesn't hide if the mouse happens to move out if there's a field in focus. Unfortunately, that also means that when the field does lose focus (and it's time for the widget to hide again) it just stays there. The unHover event has been and gone.
So I added this:
$('#tracker *').blur(function(){
hideTracker();
});
And that works too - with one little bug that I need help with!
If the focus moves from one element within the tracker to another which is also within #tracker, the tracker hides. I figured that if($('#tracker').find(':focus').length == 0) would return false, given that the next form element has focus, but I guess it doesn't.
Is it the case that .blur() fires before the next element attains focus?
How can I get around this?
How about something like this?
$('body *').focus(function(){
if(!$(this).is('#tracker *') && $('#tracker:visible').length != 0) hideTracker();
});
Yikes. Tricky. Yes, what's happening is:
mousedown: old form element gets the blur event. $(':focus').length == 0.
mouseup: new form element gets the focus event. $newFormElement.is(':focus') == true.
This is an improvement:
$('#tracker').focusout(function() //basically like $('#tracker, #tracker *').blur(), but "this" is always '#tracker'
{
if(!$(this).is('#tracker:hover')) //for some reason plain old :hover doesn't work, at least on the latest OS X Chrome
hideTracker();
});
But it's not perfect. It only really works if you use the mouse. If you use tab to move between fields (or some other possible mechanism) while your mouse is not hovering over #tracker, it won't work.
Here's another attempt. It's a bit...hackier. The gist is that, instead of handling the blur event, you handle the focus event of the second thing that's focused. But! What if you click something that can't be focused? Blank space on your page? Then no focus event is fired.
Okay. So the trick is: put a tabindex="0" in your root <html> tag. This means that there is always something that can be focused. So there's no way to focus on nothing (at least, I don't think so).
Then you can do this:
$('*').live('focus', function(e)
{
if(!$.contains($('#tracker')[0], this)) //if the new thing you focused on is not a descendant of #tracker
hideTracker();
e.stopPropagation();
});
Eh? So yeah, that's a certified hack. But it's a tough problem, and that's the best I can come up with at this hour.
Thank you all for your answers. Utilising the .focus() event rather than .blur() was a clever way to look at it. Unfortunately, it does raise a couple of browser problems, and I couldn't get any of the above working very robustly.
In the end I decided to use setTimeout(hideTracker, 100); to allow the focus() event to take place before the count of focussed elements within tracker was evaluated. Not ideal, but it's working well and the delay is fairly imperceptible.
Thanks again.
I'm using ASP.NET, but on a certain page I am using regular html text boxes as the request is done with AJAX, rather than the traditional full page post back. My issue is that when the user fills out the last text box and presses enter the text box loses focus and the page scrolls all the way to the bottom.
I tried using the onblur event but it's not working, so I'm wondering what event is actually being called when the enter key is pressed(or any key for that matter).
I tried this:
$("#loginPass").blur(function (e) {
if (e.keyCode == 13)
$("#DealerLogin").click();
});
I have firebug for Firefox but can't figure out how to look at what js related operations are firing.
In the Firebug scripts panel, you can click the pause button:
Try it right before you hit enter, then step through the code.
I wouldn't call myself a javascript expert, but this is what I would try.
When I get stuck, and don't know if or when my methods are being called , I fall back to using the trusty old "alert('in method 1');" technique to debug my code.
$(document).ready(function(){
alert("In document.ready()");
$("#loginPass").blur(function(e)
{
alert("In loginPass.blur() with keycode = " + e.keyCode);
});
$("#loginPass").keydown(function(e)
{
alert("In loginPass.keydown() with keycode = " + e.keyCode);
});
});
It certainly isn't an elegant technique, but is often revealing. If you find none of your methods are getting called, I guess make sure your text box id correctly matches "loginPass".
My issue is that when the user fills
out the last text box and presses
enter the text box loses focus and the
page scrolls all the way to the
bottom.
Hmm. This is definitely not a default behaviour for browsers. You need to know, what does this and just catch this event or part of code.
I have a MenuBar setup with YUI's MenuBar widget, and I have a YAHOO.util.KeyListener attached to document to get quick keyboard access to the menus and sub-menu items (e.g. 's' to open the Setup menu). The problem is that the keylistener will still fire when a user is in an input element. For example, a user might be typing soup into a text field, and the 's' character will cause the Setup menu to pop open.
One solution would be to disable the keylistener when focus is on an input element, and enable it on blur. How would I go about doing this? Is there a better solution?
I commend you for trying to provide keyboard shortcuts, but be aware that this will be a bit of a pain to implement cross-platform. If it's feasible, I strongly recommend using access keys on <a> tags.
If you're still going, I guess accesskey won't work for you. I'll assume you've read the relevant YUI tutorial.
If blur and focus are really the right way to go, I'd use something like
YAHOO.util.Event.onDOMReady(init);
function init() {
// set up the keyboard listeners
setUpExceptionsToKeyboardShortcuts();
}
function disableShortcuts() {
// Do what you've got to do
}
function enableShortcuts() {
// Do what you've got to do
}
function setUpExceptionsToKeyboardShortcuts() {
var focusable = document.getElementsByTagName('input');
focusable = focusable.concat(document.getElementsByTagName('select'));
focusable = focusable.concat(document.getElementsByTagName('textarea'));
YAHOO.util.Event.addListener(focusable, 'focus', disableShortcuts);
YAHOO.util.Event.addListener(focusable, 'blur', ensableShortcuts);
}