473,327 Members | 2,090 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,327 software developers and data experts.

kbd handler

Hi
The code below worked fine in IE5. I changed to IE6 and I can trap the
'enter' key but I can't add a line feed to the text in the div. Also what
other browser should I be testing with and where can I download it? I intend
to write a full blown kbd handler that will also trap the backspace and tab
etc. I can use all the help I can get. BTW I tried doing this with a
textarea but I need to write directly to the divide. The intention here is
to have a letter that can have different borders clipart etc and the ability
to select text and change the various css properties or use exec Command to
toggle them. If anyone has this working or knows of someone or a site that
has I'll be ecstatic.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML><HEAD><TITLE>kbd handler</TITLE>
<script type="text/javascript">
document.onkeypress = function (evt) {
var el = document.all?letter:document.getElementById('lette r');
var evt = evt || window.event;
var keyCode = evt.keyCode || evt.which;
// alert(keyCode);
if(keyCode == 27) return;
if(keyCode == 13) {
el.firstChild.data += '\n';
el.innerText += '\n';
el.innerHTML += '<br>';
return;
}
var str = String.fromCharCode(keyCode);
// el.firstChild.data += str;
el.innerText += str;
}
</script></HEAD>
<BODY>
<div id="letter"
style="width:300px;padding:4px;margin-left:4px;height:450px;background-color
:#ffffcc;"></div>
</BODY></HTML>
TIA
Jimbo
Jul 23 '05 #1
6 1683
J. J. Cale wrote:
Also what
other browser should I be testing with and where can I download it?
There are plenty of browsers to test with, legacy browsers and exotic
browsers to ensure clean degradation, and modern browsers to ensure your
script works correctly (check Mozilla and Opera).
I intend
to write a full blown kbd handler that will also trap the backspace and tab
etc. I can use all the help I can get. BTW I tried doing this with a
textarea but I need to write directly to the divide.
Then you'll have to handle key events, which unfortunately haven't been
much standardised; this means you can expect different behaviors across
user agents, all the more you'll be dealing with built-in key behaviors,
like navigation, search etc which will of course differ between the
browsers you'll test your script in:-)
If anyone has this working or knows of someone or a site that
has I'll be ecstatic.


Nope but it's been time since I haven't done some javascript, here's
some lines for you. Tested IE5, IE6, Mozilla and Opera 7.5. HTH.
<head>
<style type="text/css">
html, body {background:#000; color:#9f0;}
</style>
</head>

<body>
<script type="text/javascript">
// kbd
function Screen(screenId){
document.write("<div id=\""+screenId+"\">_<\/div>");
this.html=document.getElementById(screenId);
}

Screen.prototype.insertLineBreak=function() {
this.html.insertBefore(
document.createElement("br"),
this.html.lastChild
);
}

Screen.prototype.insertChar=function(c) {
this.html.insertBefore(
document.createTextNode(c),
this.html.lastChild
);
}

Screen.prototype.deleteChar=function() {
var childToRemove=this.html.lastChild &&
this.html.lastChild.previousSibling;
if(childToRemove)
this.html.removeChild(childToRemove);
}

Screen.prototype.setDefaultOutput=function() {
var screenObj=this;
var doKeyPress=true;
var keyPressReturnValue=false;

// primary key controller
// used to manage browsers' default action and secondary controller
document.onkeydown=function(evt){
var key,returnValue;

evt=evt||window.event;
key=evt.keyCode||evt.which;

returnValue=true;
doKeyPress=true;
keyPressReturnValue=false;

switch(key) {
case 8: //DEL
document.onkeypress({keyCode:8}); //special IE!
doKeyPress=false; //already done
keyPressReturnValue=false; // prevent default
returnValue=false; // prevent default
break;

case 116: //refresh
doKeyPress=false; //don't print anything
keyPressReturnValue=true; //permit the refresh
returnValue=true; //permit the refresh
break;
}

return returnValue;
}

// secondary key controller
// used to handle regular keystrokes
document.onkeypress = function(evt) {
var key;
evt=evt||window.event;
key=evt.keyCode||evt.which;

if(doKeyPress) {
switch(key) {
case 0 : //undefined
case 16: //SHIFT
case 17: //CTRL
case 18: //ALTGR
break;

case 13: //ENTER
screenObj.insertLineBreak();
break;

case 8: //DEL
screenObj.deleteChar();
break;

default:
screenObj.insertChar(String.fromCharCode(key));
break;
}
}

return keyPressReturnValue;
}
}

// main
if(document.getElementById &&
document.createTextNode &&
document.createElement &&
document.body &&
document.body.appendChild &&
document.body.removeChild &&
document.body.insertBefore
){

(new Screen("screen")).setDefaultOutput();

} else {
document.write("<p>System failure /<\/p>");
}
</script>
<noscript><p>System failure /</p></noscript>
</body>
Jul 23 '05 #2
Thank you! Youv'e saved me a lot of work. I can plug this straight into my
project and tweak it to my needs.

Actually I was hoping to do this without the DOM. I already did most of this
with the textarea for input and assignment via the DOM. Your code is tighter
and much more elegant!!

In IE5 the appending of the charachter '\n' to the objects data attribute
(or to innerText) gave me the line feed but this disappeared when I upgraded
to IE6. I did my homework on the different ways that browsers handle events.
Can you change my original code to append the '\n' or if necessary '\r\n'
and have the cursor 'move' to the next line?(no DOM).

If not I thank you again for your excellent solution and your time. Be
thrice blessed.

Jimbo
"Yann-Erwan Perio" <y-*******@em-lyon.com> wrote in message
news:41***********************@news.free.fr...
J. J. Cale wrote:
Also what
other browser should I be testing with and where can I download it?


There are plenty of browsers to test with, legacy browsers and exotic
browsers to ensure clean degradation, and modern browsers to ensure your
script works correctly (check Mozilla and Opera).
I intend
to write a full blown kbd handler that will also trap the backspace and tab etc. I can use all the help I can get. BTW I tried doing this with a
textarea but I need to write directly to the divide.


Then you'll have to handle key events, which unfortunately haven't been
much standardised; this means you can expect different behaviors across
user agents, all the more you'll be dealing with built-in key behaviors,
like navigation, search etc which will of course differ between the
browsers you'll test your script in:-)
If anyone has this working or knows of someone or a site that
has I'll be ecstatic.


Nope but it's been time since I haven't done some javascript, here's
some lines for you. Tested IE5, IE6, Mozilla and Opera 7.5. HTH.
<head>
<style type="text/css">
html, body {background:#000; color:#9f0;}
</style>
</head>

<body>
<script type="text/javascript">
// kbd
function Screen(screenId){
document.write("<div id=\""+screenId+"\">_<\/div>");
this.html=document.getElementById(screenId);
}

Screen.prototype.insertLineBreak=function() {
this.html.insertBefore(
document.createElement("br"),
this.html.lastChild
);
}

Screen.prototype.insertChar=function(c) {
this.html.insertBefore(
document.createTextNode(c),
this.html.lastChild
);
}

Screen.prototype.deleteChar=function() {
var childToRemove=this.html.lastChild &&
this.html.lastChild.previousSibling;
if(childToRemove)
this.html.removeChild(childToRemove);
}

Screen.prototype.setDefaultOutput=function() {
var screenObj=this;
var doKeyPress=true;
var keyPressReturnValue=false;

// primary key controller
// used to manage browsers' default action and secondary controller
document.onkeydown=function(evt){
var key,returnValue;

evt=evt||window.event;
key=evt.keyCode||evt.which;

returnValue=true;
doKeyPress=true;
keyPressReturnValue=false;

switch(key) {
case 8: //DEL
document.onkeypress({keyCode:8}); //special IE!
doKeyPress=false; //already done
keyPressReturnValue=false; // prevent default
returnValue=false; // prevent default
break;

case 116: //refresh
doKeyPress=false; //don't print anything
keyPressReturnValue=true; //permit the refresh
returnValue=true; //permit the refresh
break;
}

return returnValue;
}

// secondary key controller
// used to handle regular keystrokes
document.onkeypress = function(evt) {
var key;
evt=evt||window.event;
key=evt.keyCode||evt.which;

if(doKeyPress) {
switch(key) {
case 0 : //undefined
case 16: //SHIFT
case 17: //CTRL
case 18: //ALTGR
break;

case 13: //ENTER
screenObj.insertLineBreak();
break;

case 8: //DEL
screenObj.deleteChar();
break;

default:
screenObj.insertChar(String.fromCharCode(key));
break;
}
}

return keyPressReturnValue;
}
}

// main
if(document.getElementById &&
document.createTextNode &&
document.createElement &&
document.body &&
document.body.appendChild &&
document.body.removeChild &&
document.body.insertBefore
){

(new Screen("screen")).setDefaultOutput();

} else {
document.write("<p>System failure /<\/p>");
}
</script>
<noscript><p>System failure /</p></noscript>
</body>

Jul 23 '05 #3
J. J. Cale wrote:

Hi Jimbo,
Thank you! Youv'e saved me a lot of work. I can plug this straight into my
project and tweak it to my needs.
Glad that helped:-)
Actually I was hoping to do this without the DOM.
I cannot really comment about this, a script conception depends on the
context, if you can tell us what you're exactly trying to achieve then I
(or others) might provide you with some more information on how to
tackle the problem at a global level.
In IE5 the appending of the charachter '\n' to the objects data attribute
(or to innerText) gave me the line feed but this disappeared when I upgraded
to IE6.
I cannot see this, to me the behavior is the same in IE5 and IE6 - could
you post a simple test case?
Can you change my original code to append the '\n' or if necessary '\r\n'
and have the cursor 'move' to the next line?(no DOM).


I'm afraid not, to me inserting a line break won't work, you have to
insert a BR element, using DOM methods or innerHTML with some dummy text
(innerHTML="<br>" does nothing AFAICS).

Also note that mixing innerHTML and innerText might provide unwanted
side-effects, since reading a BR via innerText, and writing innerText
afterwards, transforms the BR into CR/LF, which will render differently
on the screen.
Regards,
Yep.
Jul 23 '05 #4
Yann-Erwan Perio wrote:
(innerHTML="<br>" does nothing AFAICS).


I've just reviewed my test case, it's faulty - innerHTML works fine of
course, it's just that I also tested for innerText and got unexpected
results with it (I'm not used to innerText) - sorry for the confusion!
<div id="foo">&nbsp;</div>
<script type="text/javascript">
function L() {alert(foo.innerText.length)};

foo.innerHTML="<br>"; L(); //0
foo.innerHTML="<br>1"; L(); //3
foo.innerHTML="<br> <br>"; L(); //0
foo.innerHTML="<br>1 "; L(); //4
foo.innerHTML="<br> 1"; L(); //3
foo.innerHTML="<br>1 <br>"; L(); //4
foo.innerHTML="<br> 1<br>"; L(); //3
</script>
Jul 23 '05 #5
YEP Sorry about the email. Hit the reply instead of group reply. Thanks for
staying with me.
if you can tell us what you're exactly trying to achieve then I
(or others) might provide you with some more information on how to
tackle the problem at a global level.
from original post -
"The intention here is to have a letter" (letterhead) "that can have
different borders clipart etc and the ability to select text and change the
various css properties or use exec Command to toggle them."
Also note that mixing innerHTML and innerText might provide unwanted
side-effects, since reading a BR via innerText, and writing innerText
afterwards, transforms the BR into CR/LF, which will render differently
on the screen.


Definately! I only used innerText to see if I got the same result as
obj.firstChild.data and didn't use it for assignment. I've been checking
both the DOM possibilities and innerHTML. Both have their challenges. AFAIK
innerText is not as widely supported as innerHTML and the DOM is fairly
safe.

Does Mozilla have the event object limitations of Netscape's DOM?
Does it support the createTextRange or createRange or createControlRange
methods?
Have you any ideas how to emulate IE execCommand in Mozilla?

Your code has another advantage in that it creates a separate textNode for
each character. I read that text nodes can be the target/srcElement of the
event object. Does the DOM have a separate event model? I am confused
probably about this.

Here is the basis of my last project. Sorry IE only.
in my original project changeSelection() is called from a controller with
options for bold, italic, underline, family, size, justification and color.
It is passed a parameter: changeSelection('Bold') which I switch in the
original function and pass to execCommand or another function.
e.g.
<a href="#" onclick = "changeSelection('Bold'); return false;"><b>B</b></a>
<a href="#" onclick = "changeSelection('Italic'); return
false;"><i>I</i></a>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD> <TITLE>Stationary Project Handlers</TITLE>
<style type=text/css>
<!--
#letter {
position:absolute;
top:20px;
width:45%;
height:90%;
background-color:#ffffcc;
color:navy;
padding:15px;
border:1px black solid;
}
-->
</style>
<script language="JavaScript">
function handleKey() {
if(event.keyCode == 8) {
letter.innerHTML =
letter.innerHTML.substring(0,letter.innerHTML.leng th-2) + '_';
event.returnValue = false;
}
if(event.keyCode == 13) {
letter.innerHTML =
letter.innerHTML.substring(0,letter.innerHTML.leng th-1);
letter.innerHTML += '<br>_';
event.returnValue = false;
}
}
function keyPress(){
letter.innerHTML =
letter.innerHTML.substring(0,letter.innerHTML.leng th-1);
var a = String.fromCharCode(event.keyCode);
if(!a) {alert("NO");return;}
letter.innerHTML += (a + '_');
}
function changeSelection() { // primitive just for example
// alert(letter.innerHTML); return; // for debugging
var range = document.selection.createRange();
var str=range.text;
range=document.body.createTextRange();
range.findText(str);
range.execCommand('Bold');
document.selection.empty();
}
document.onkeydown = handleKey;
document.onkeypress = keyPress;
document.onmouseup=changeSelection;
</script></HEAD>
<BODY><div id="letter">_</div></BODY></HTML>
Thanks again Jimbo

Jul 23 '05 #6
J. J. Cale wrote:
from original post -
"The intention here is to have a letter" (letterhead) "that can have
different borders clipart etc and the ability to select text and change the
various css properties or use exec Command to toggle them."
You're right sorry, I read it too fast. The best cross-browser way is to
use a textarea and have the content parsed server-side, but if you can
afford reducing your browsers' range then give a look to
designMode-based editors.
Does Mozilla have the event object limitations of Netscape's DOM?
Argh. What event object limitation? Mozilla, as Netscape 7+, follows the
W3C's event model, which is much more powerful than IE's event model
(event capture, custom events...).

<URL:http://www.brainjar.com/dhtml/events/>
<URL:http://www.w3.org/TR/DOM-Level-3-Events/>

The tutorial is quite old, but remains instructive; the reference is a
bit hard, though certainly worth a long study.
Does it support the createTextRange or createRange or createControlRange
methods?
Not as IE proprietary methods:-) However, Mozilla implements the W3C
Ranges specification, also adding some proprietary things.

<URL:http://www.w3.org/TR/2000/REC-DOM-Level-2-Traversal-Range-20001113/ranges.html>
Have you any ideas how to emulate IE execCommand in Mozilla?
It depends on the command being executed. If it's related to style, then
you can emulate it using DOM ranges and heavy DOM nodes manipulation.
I've posted a way to emulate the "Bold" command some while ago.

<URL:http://groups.google.com/groups?selm=4102f3f9%240%2429382%24626a14ce%40news .free.fr>

The approach to emulate italic, underline and forecolor at the same time
would be a bit different, though. I believe that the best way would be
to use SPAN elements with multiple CSS classes; not an easy coding task.
I read that text nodes can be the target/srcElement of the
event object.


And where did you read that:-) In IE events only go to elements, and in
Mozilla it depends on the version. Basically don't count on events for
text nodes.

However using a textNode per char should prove useful since you can
design string-like methods (a node is a char).
Cheers,
Yep.
Jul 23 '05 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

13
by: aundro | last post by:
Hello, I've been looking on the web for a solution to this problem: I create a set of checkboxes, and 2 buttons: - one is labeled "All" - the other is labeled "None" Clicking "All" is...
3
by: LeTubs | last post by:
Hi I'm not sure if this is correct ...place to post but here goes This is what i'm trying to do, I want to write a signal / alarm handler ( I don't know which hence the posting here, as once I...
10
by: Wylbur via DotNetMonster.com | last post by:
Hello to all of you geniuses, I'm having a problem trying to get an Init handler to fire for a Placeholder control at the initialization phase. I’ve posted this problem to 3 other ASP.NET...
10
by: Sean Dockery | last post by:
I have the following HTML file that I've been using for testing... <html> <head> <script type="text/javascript"> <!-- function handleWindowLoad() { var items = ; for (var i = 0; i < 11; i++)...
2
by: Jukka Aho | last post by:
When converting Unicode strings to legacy character encodings, it is possible to register a custom error handler that will catch and process all code points that do not have a direct equivalent in...
6
by: =?Utf-8?B?cHJhZGVlcF9UUA==?= | last post by:
I am trying to create a simple HTTP handler in ASP.net 2.0. I am using VS 2005. I am trying to handle a custom extension file givein in the URL. I have also created the following entry in the...
2
by: =?Utf-8?B?TWF4IDFlNg==?= | last post by:
I have two events (a and b) each with its own handler. Unfortunately, event b is sometimes trigered by an action within a's handler causing a's handler to abort prematurely and service the b event....
16
by: Peter Oliphant | last post by:
Note that although this involves SAPI, it is more a question about Timers and event handlers. I wrote a Speech Recognize handler (SAPI), and put some code in it to enable a Timer. It would not...
3
by: =?Utf-8?B?Um9nZXIgTWFydGlu?= | last post by:
Note: My apologies for repeating this post from last week, but my nospam alias and profile account were incorrect. I think I have fixed this, so hopefully this post will trigger MS into a response...
13
by: =?Utf-8?B?Um9nZXIgTWFydGlu?= | last post by:
This is a follow-up to my post "Silverlight video doesn't work when file is streamed from handler in ASP.net" at...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.