Hi Im new to javascript and are trying to get a text input of 9 chars long to display on screen as it is typed. I have a script to restrict the input to thats entered however I am having trouble taking that input and swapping the characters with graphic files that represent the characters.
so I have alphabet & number files named a - z & 1 - 0 respectivly ie "a.gif"
etc.
So I would like as you typed say "your name" to have your name display in a table or box.
External file
function check(e) {
var keynum
var keychar
var numcheck
// For Internet Explorer
if (window.event)
{
keynum = e.keyCode
}
// For Netscape/Firefox/Opera
else if (e.which)
{
keynum = e.which
}
The following is untested because I don't have a link to your images.
Put this in same directory and let me know how it works,
or provide a link to your image directory.
Note: I compressed your keyboard key check function to be a little easier to understand.
Code:
<html>
<head>
<title> xfer2img </title>
<script type="text/javascript">
// From: http://www.webdeveloper.com/forum/showthread.php?p=1194938#post1194938
function check(e) {
var keynum, keychar, numcheck;
if (window.event) { keynum = e.keyCode; } // For Internet Explorer
else if (e.which) { keynum = e.which; } // For Netscape/Firefox/Opera
keychar = String.fromCharCode(keynum)
//List of special characters you want to restrict
if ('!~@#$%^*()_+={}[]:;<>?|'.indexOf(keychar) != -1) { return false; }
return true;
}
function xfer2Img(str) {
var tstr = '';
for (var i=0; i<str.length; i++) {
tstr += '<img src="'+str[i]+'.gif" alt="'+str[i]+'">';
}
document.getElementById('divArea').innerHTML = tstr;
}
</script>
<style type="text/css">
</style>
</head>
<body>
<!--webbot bot="Validation" B-Value-Required="TRUE" I-Maximum-Length="9" -->
<input type= text name="txtName1" id="txtName1" size="9" " maxlength="9"
onkeypress="return check(event)" onblur="xfer2Img(this.value)">
<div id="divArea"></div>
</body>
</html>
I would also like to have multiple image directories say
/images/alpha/font1/ .... /font2/ ... /font3/ ....
and pass the path to the function
Undefined was probably because you did not put the script in the same directory as the images.
I did not have the images to check out the script.
You neglected to check to see if the user entered an upper case letter. Fixed that also.
Added a font change radio button. They are all the same currently because you have given me
only one font to test with. Change baseURL elements to reflect directory of new images.
Code:
<html>
<head>
<title> xfer2img </title>
<script type="text/javascript">
// From: http://www.webdeveloper.com/forum/showthread.php?p=1194938#post1194938
function check(e) {
var keynum, keychar, numcheck;
if (window.event) { keynum = e.keyCode; } // For Internet Explorer
else if (e.which) { keynum = e.which; } // For Netscape/Firefox/Opera
keychar = String.fromCharCode(keynum)
//List of special characters you want to restrict
if ('!~@#$%^*()_+={}[]:;<>?|'.indexOf(keychar) != -1) { return false; }
return true;
}
var fontPointer = 0;
var baseURL = [
'http://www.addstogether.com.au/images/alpha/',
'http://www.addstogether.com.au/images/alpha/',
'http://www.addstogether.com.au/images/alpha/'
];
function xfer2Img(str) {
var tstr = '';
for (var i=0; i<str.length; i++) {
tstr += '<img src="'+baseURL[fontPointer]+str[i].toLowerCase()+'.gif" alt="'+str[i]+'">';
}
document.getElementById('divArea').innerHTML = tstr;
}
</script>
</head>
<body onload="document.getElementById('txtName1').focus()">
Font #:
<input type="radio" name="fnt" value="0" onclick="fontPointer='0'" checked> 1
<input type="radio" name="fnt" value="1" onclick="fontPointer='1'" > 2
<input type="radio" name="fnt" value="2" onclick="fontPointer='2'" > 3<br>
<!--webbot bot="Validation" B-Value-Required="TRUE" I-Maximum-Length="9" -->
<input type= text name="txtName1" id="txtName1" size="9" " maxlength="9"
onkeypress="return check(event)" onkeyup="xfer2Img(this.value)">
<div id="divArea"></div>
</body>
</html>
The .toLowerCase() was never intended to change the display on the sceen. It was put in to assure that the correct filename was chosen from the textbox input. It would not find a file named 'A.gif', only 'a.gif'.
If you need the text box in lower case, that is an easy fix.
Change the value of the textbox to lower case as the keys are entered in your check() function.
I am unable to fully check the problem with the MSIE version at this time. I'll look at it more later.
Two guesses at this time:
1. You need to specify the <!DOCTYPE ...> tag
2. Or possibly change to this:
Code:
function xfer2Img(str) {
var tstr = '';
var ch = '';
for (var i=0; i<str.length; i++) {
ch = str.charAt(i); ch = ch.toLowerCase();
tstr += '<img src="'+baseURL[fontPointer]+ch+'.gif" alt="'+c+'">';
}
document.getElementById('divArea').innerHTML = tstr;
}
Reply With Quote
Try this for me...
Simple image swap based on text input
Originally Posted by adds
Bookmarks