I need to:
Create a cross-browser (works in Firefox and MS IE) web page:
a. Using anonymous JS methods, create an input field that always converts the user typed value into uppercase when the focus is taken away
b. Write JavaScript code so that anywhere you in the window, it shows the key you have pressed.
HINT: Use the event object for detecting the key. HINT: To capture the event use document.onkeypress HINT: Use String.fromCharCode(Keycode) to convert the keycode obtained from the event back to a character.
I've read a previousattepmt on this and here what I have so far:
html>
<head>
<body>
<center>
<H1>Cross Browser Script</H1>
<h3>Wayne Shugars</h3>
<h5>G00063680</h5>
<h5>Script 4b</h5>
</center>
<form>
Enter text here: <input type="text" id="txt"
onblur="this.value=this.value.toUpperCase()">
</form>
</body>
</html>
That will give the keycode and convert it to uppercase, but it doesn't convert back to normal text.
I tried this:
<HTML>
<HEAD>
<TITLE>Cross Browser Script</TITLE>
<script type="text/javascript">
function upperCase(x)
{
var xValue = x.value;
x.value = xValue.toUpperCase();
}
</script>
Enter text here: <input type="text"
id="sometext" onblur="upperCase(this)">
</BODY>
</HTML>
This will convert what ever normal caracter you type to uppercase when you wove out of focus, but not the keycode.
This is my first attempt at programming and any help is greatly appreciated.
Thank you
Your first attempt is right, but for one thing. You are overwriting the value of the text-box every time a key is pressed. Remove that, and it should work perfectly.
Your first attempt is right, but for one thing. You are overwriting the value of the text-box every time a key is pressed. Remove that, and it should work perfectly.
Thank you Declan1991 for you help, but are you saying I should remove the document.onkeypress = function. The request for the assignment was to use it: "HINT: To capture the event use document.onkeypress" or am misunderstanding something. Take in mind that I am very new at doing this, like little over 1 week. Therefore little words and cartoons will help alot. Only kidding, but very simple directions will be very helpful. Thank you.
Last edited by Declan1991; 04-10-2010 at 08:19 PM.
Reason: Complete quote
No, merely suggesting (well actually I'm guessing what you want) that you remove this line as I did in my example.
Code:
document.getElementById('txt').value = key;
The rest is exactly the same as your code was.
ADDITION: Actually, I just spotted something that will stop it working in IE. You (or someone else ) went to the hassle of defining key, which contains a number corresponding to the key pressed. You window.status should use that, not event.keyCode. So the fully working code is below. It's basically what you had, with just a few minor alterations.
Code:
<html>
<head>
<title>Assignment 4b</title>
<script type="text/javascript">
window.onkeypress = function (e) {
var key = (e) ? e.which : event.keyCode;
var char = String.fromCharCode(key); // NOTE: Use the variable key, NOT event.keyCode
window.status = "You pressed " + char;
}
</script>
</head>
<body>
<center>
<h1>Cross Browser Script</h1>
<h3>Wayne Shugars</h3>
<h5>G00063680</h5>
<h5>Script 4b</h5>
</center>
<form>
Enter text here: <input type="text" id="txt"
onblur="this.value=this.value.toUpperCase();">
</form>
</body>
</html>
Great wit and madness are near allied, and fine a line their bounds divide.
Declan1991: Perhaps I Misunderstand the Assignment
Is the assignment:
Create a cross-browser (works in Firefox and MS IE) web page:
a. Using anonymous JS methods, create an input field that always converts the user typed value into uppercase when the focus is taken away
b. Write JavaScript code so that anywhere you in the window, it shows the key you have pressed.
HINT: Use the event object for detecting the key. HINT: To capture the event use document.onkeypress HINT: Use String.fromCharCode(Keycode) to convert the keycode obtained from the event back to a character.
Asking two script or is one script that does both.
The code that was last:
<html>
<head>
<title>Assignment 4b</title>
<script type="text/javascript">
window.onkeypress = function (e) {
var key = (e) ? e.which : event.keyCode;
var char = String.fromCharCode(key); // NOTE: Use the variable key, NOT event.keyCode
window.status = "You pressed " + char;
}
</script>
</head>
<body>
<center>
<h1>Cross Browser Script</h1>
<h3>Wayne Shugars</h3>
<h5>G00063680</h5>
<h5>Script 4b</h5>
</center>
<form>
Enter text here: <input type="text" id="txt"
onblur="this.value=this.value.toUpperCase();">
</form>
</body>
</html>
Definitely complied with the first part:
"Using anonymous JS methods, create an input field that always converts the user typed value into uppercase when the focus is taken away," but doesn't seem to answer the second request:
Write JavaScript code so that anywhere you (type) in the window, it shows the key you have pressed.
In which I tried:
<html>
<head>
<title>Keycode Identifier</title>
<script type="text/javascript">
document.onkeypress = function(e)
{
var key = (e) ? e.which : event.keyCode;//set varible for the keycode
document.getElementById('txt').value = key;//Get the information from typed key
var char;//set varible for the character
char = String.fromCharCode(event.keyCode);//convert the keycode back to the character
window.status = "You pressed " + char;//Displays the converted keycode in the window status
}
</script>
</head>
<body>
<center>
<h2>Cross Browser Script</h2>
<h3>Wayne Shugars</h3>
<h5>G00063680</h5>
<h5>Script 4b</h5>
</center>
<form>
Keycode for key you pressed: <input type="text" id="txt"
onblur="this.value=this.value.toUpperCase()">
<h5>The Key Press is on bottom of screen</h5>
</form>
</body>
</html>
Which gives the keycode and convert it to the actual character and goes to uppercase when the focus is removed, but is it--what the assignment is? and is it cross browser capatible. I sorry if I seem dense, but I feel like I am talking in another language and I can't speak the language.
Reply With Quote
Originally Posted by Declan1991
) went to the hassle of defining key, which contains a number corresponding to the key pressed. You window.status should use that, not event.keyCode. So the fully working code is below. It's basically what you had, with just a few minor alterations.
Thank you Declan1991
Declan1991: Perhaps I Misunderstand the Assignment
Bookmarks