jquery keyup firing and activate speech

Forum Moderators: open

Message Too Old, No Replies

jquery keyup firing and activate speech

ocon

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

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

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

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

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?