homepage Welcome to WebmasterWorld Guest from 54.196.195.158
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
jquery keyup firing and activate speech
ocon




msg:4394221
 2:06 am on Dec 5, 2011 (gmt 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>

 

Dijkgraaf




msg:4394222
 2:30 am on Dec 5, 2011 (gmt 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")

ocon




msg:4394231
 3:39 am on Dec 5, 2011 (gmt 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).

ocon




msg:4394236
 3:56 am on Dec 5, 2011 (gmt 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>

Dijkgraaf




msg:4394521
 8:29 pm on Dec 5, 2011 (gmt 0)

What software is providing the speech input functionality?

Does it expose an API you can call via JavaScript?

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved