Welcome to WebmasterWorld Guest from 54.167.86.132

Forum Moderators: open

Message Too Old, No Replies

jquery keyup firing and activate speech

     
2:06 am on Dec 5, 2011 (gmt 0)

Full Member

5+ Year Member Top Contributors Of The Month

joined:Sept 30, 2009
posts:224
votes: 0


My code has an input box that I can focus by pressing "q" on my keyboard, along with several other keyboard shortcuts. This input box also supports inputting text using a microphone in supported browsers.

I'd like to do two things:
- Prevent my keyboard shortcuts from firing if any input, textarea, or similar field is focused.
- Create a keyboard shortcut (e.keyCode==81 && event.shiftKey) to activate the speech input field so users do not have to click on the mic with their mouse.

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).keyup(function(e){
if(e.keyCode==81 && event.shiftKey) alert("Shift 13 pressed"); // q+shift
else if(e.keyCode==81) document.getElementById("query").focus(); // q
else if(e.keyCode==82) alert("Do some other function"); //r
});
</script>
</head>

<body>
<input id="query" type="text" x-webkit-speech />
</body>
</html>
2:30 am on Dec 5, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:May 31, 2005
posts:1108
votes: 0


Prevent keyboard shortcuts from firing if any input, textarea, or similar field is focused

(event.srcElement.type != "text" && event.srcElement.type != "textarea" && event.srcElement.type != "password")
3:39 am on Dec 5, 2011 (gmt 0)

Full Member

5+ Year Member Top Contributors Of The Month

joined:Sept 30, 2009
posts:224
votes: 0


Thank you, I changed the code to this:

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).keyup(function(event){
if(event.srcElement.type != "text" && event.srcElement.type != "textarea" && event.srcElement.type != "password"){
if(event.keyCode==81 && event.shiftKey) alert("Shift 13 pressed"); // q+shift
else if(event.keyCode==81) document.getElementById("query").focus(); // q
else if(event.keyCode==82) alert("Do some other function"); // r
}
});
</script>
</head>

<body>
<input id="query" type="text" x-webkit-speech />
</body>
</html>


It works, but I am getting two problems:
1 - Tested in Chrome and Firefox. Firefox does not work, I get the error:
Error: event.srcElement is undefined

2 - If the field is not focused the shortcuts work great (expected). If the field is focused the shortcuts do not work (expected). But if I use the tab key to loose focus of the input field then I can not type in the input field (expected) but they keyboard shortcuts also do not work (unexpected). This was tested in Google Chrome on Windows, (again, Firefox didn't work with that line of code).
3:56 am on Dec 5, 2011 (gmt 0)

Full Member

5+ Year Member Top Contributors Of The Month

joined:Sept 30, 2009
posts:224
votes: 0


Ok, fixed it:

1 - Detect to see if event.srcElement is supported, else use event.srcElement if supported, else use an empty string.
2 - I'm an idiot. Hitting tab took me out of my page because there wasn't anything else inside except the input box. I added another element and now it works great.

I have half my question answered, I'm still trying to figure out how I can activate the speech input on the textbox using a keyboard shortcut instead of having the users hit the button with their mouse.

My current code looks like this:

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).keyup(function(event){
var box = (event.target) ? event.target.type : (event.srcElement) ? event.srcElement.type : "";
if(box != "text" && box != "textarea" && box != "password"){
if(event.keyCode==81 && event.shiftKey) alert("Shift 13 pressed"); // q+shift
else if(event.keyCode==81) document.getElementById("query").focus(); // q
else if(event.keyCode==82) alert("Do some other function"); // r
}});
</script>
</head>

<body>
<input id="query" type="text" x-webkit-speech />
<a href="#">Top</a>
</body>
</html>
8:29 pm on Dec 5, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:May 31, 2005
posts:1108
votes: 0


What software is providing the speech input functionality?

Does it expose an API you can call via JavaScript?
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members