abrakatabra Posted May 22, 2010 Share Posted May 22, 2010 Good day!here is an example of my problem: <html> <head> <script type="text/javascript"> function callback(node) { document.getElementById("info").innerHTML+="a"; } </script> </head> <body> <div contenteditable="true"> <pre onkeypress="callback(this)">a</pre> </div> </br> <button onclick="alert(document.body.innerHTML)">press to see content</button> <div id="info">here is info</div> </body></html> keypress event does not occur when I type something. Although, if I press "press to see content" button I can see all typing text is inside <pre></pre> tag.Can you please let me know why I cannot receive the event and how can I get it in that case?keyup,keydown ... do not work too. Link to comment Share on other sites More sharing options...
thescientist Posted May 22, 2010 Share Posted May 22, 2010 When I tried it I saw all the code getting typed in-between the <pre> tags. And when I pressed the button, it prints out the text contained within the <body> tags. What where you expecting it to do? I'm not sure what effect you're trying to achieve. Link to comment Share on other sites More sharing options...
abrakatabra Posted May 22, 2010 Author Share Posted May 22, 2010 When I tried it I saw all the code getting typed in-between the <pre> tags. And when I pressed the button, it prints out the text contained within the <body> tags. What where you expecting it to do? I'm not sure what effect you're trying to achieve.the button I am using for debug purpose to know which new tags were added during typing and tag place of my typing text.Globally, I would like each 'pre' tag has its own keypress event handler to filter some 'characters'. each block instead of using common body event handler - because I would like text divided into separate blocks.Below case is not what I would like:<html> <head> <script type="text/javascript"> function callback(node) { document.getElementById("info").innerHTML+="a"; } </script> </head> <body> <div> <pre contenteditable="true" onkeypress="callback(this)">a</pre> ... <pre contenteditable="true" onkeypress="callback(this)">a</pre> </div> </br> <button onclick="alert(document.body.innerHTML)">press to see content</button> <div id="info">here is info</div> </body></html> i.e. each pre tag have its own contenteditable property. Because user cannot move caret between them (at least in opera browser). Link to comment Share on other sites More sharing options...
abrakatabra Posted May 22, 2010 Author Share Posted May 22, 2010 in my example, I would like content of div tag (id="info") is replaced by "aaaa..." when I type something between <pre></pre>, i.e. callback() should be call on each type. But it does not occur in case I set contenteditable to true for div. Link to comment Share on other sites More sharing options...
thescientist Posted May 22, 2010 Share Posted May 22, 2010 what if you used a form textarea to use as the space for entering text into? You could still apply the event handler to it as text is inserted into it, and have it added to the innerHTML of <div id="info"> Link to comment Share on other sites More sharing options...
abrakatabra Posted May 22, 2010 Author Share Posted May 22, 2010 what if you used a form textarea to use as the space for entering text into? You could still apply the event handler to it as text is inserted into it, and have it added to the innerHTML of <div id="info">I need to have web editor inside of it user can format text. Unfortunately, it is not possible to do so with textarea.In this editor I should catch user typing and filter it, for example, when user type 'space' I can append new pre node to body or div editable tag. Link to comment Share on other sites More sharing options...
dsonesuk Posted May 22, 2010 Share Posted May 22, 2010 Not quite sure what you are looking for, but is it something like this? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/var pretagcount=-1;function callback(node) { var addpre=""; var info=document.getElementById("info"); var current_char=node.innerHTML.charAt((node.innerHTML.length)-1); if(current_char == " ") { pretagcount++; addpre="<pre contenteditable='true'>preetext</pre>"; info.innerHTML+=""+addpre; } if(pretagcount==-1) { info.innerHTML+="a1"; } else { info=document.getElementById("info"); var pretag=info.getElementsByTagName("pre"); pretag[pretagcount].innerHTML+="a2"; } } /*--*//*]]>*/</script> <style type="text/css"></style></head><body><div> <pre contenteditable="true" onkeyup="callback(this)">a</pre></div> </br><div id="info">here is info</div></body></html> OR better still withfunction callback(node) { var addpre=""; var info=document.getElementById("info"); var current_char=node.innerHTML.charAt((node.innerHTML.length)-1); if(current_char == " ") { addpre="<pre contenteditable='true'>preetext</pre>"; info.innerHTML+=""+addpre; } if(info.childNodes.length==1) { info.innerHTML+="a1"; } else { info=document.getElementById("info"); info.lastChild.innerHTML+="a2"; } } Link to comment Share on other sites More sharing options...
abrakatabra Posted May 23, 2010 Author Share Posted May 23, 2010 thescientist and dsonesuk, thanks a lot for attempt to understand me!dsonesuk you almost right.I would like to get something like this: <title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/function callback(node) { var info=document.getElementById("info"); info.innerHTML+="a";//really here is can be any character. Because 'info' div is used to indicate onkeypress event occurs var retvalue=true; var current_char=node.innerHTML.charAt((node.innerHTML.length)-1); if(current_char == " ") { // a space is a sign of user is typing new word. And new word should be typed in new <pre> tag document.getElementById("editor").innerHTML+="<pre contenteditable='true' onkeyup='callback(this)'> </pre>"; // here is I prevent to appear the space because it is included to new <pre> tag by above line. // Alos, there is a need to add code which moves caret to new <pre> tag. But I do not know how it should be looked. // ... return false; } return true; }/*--*//*]]>*/</script> <style type="text/css"></style></head><body><div id="editor"> <pre contenteditable="true" onkeypress="callback(this)">intial text</pre></div> </br><div id="info">here is info</div></br><button contenteditable="false" onclick="alert(document.body.innerHTML)">press</button></br></body></html> The editor should work like:- initially, the editor has one <pre> tag.- each time when a user starts to type ' ' (space) character at the end of any <pre> tag, condition is : var current_char=node.innerHTML.charAt((node.innerHTML.length)-1); if(current_char == " ") - I need to add new <pre> tag which contains this space at the begin of this new <pre> tag and caret position should be placed in this new <pre> tag. document.getElementById("editor").innerHTML+="<pre onkeyup='callback(this)'> </pre>"; For example, initial html code <pre>Hello!</pre> Next, a user try to type space, new html code should look like: <pre>Hello!</pre><pre> </pre> above, new <pre> tag is appear with new space.next, user continues typing: <pre>Hello!</pre><pre> My</pre> <pre>Hello!</pre><pre> My</pre><pre> first</pre> <pre>Hello!</pre><pre> My</pre><pre> first</pre><pre> sentence.</pre> In case using of contenteditable for each <pre> tag, like this: <pre contenteditable="true">Hello!</pre><pre contenteditable="true"> My</pre><pre contenteditable="true"> first</pre><pre contenteditable="true"> sentence.</pre> a user can move caret with help of arrow keys between <pre> tags. You can try this code (1): <html> <head> <style type="text/css"> pre{ display:inline; } </style> </head> <body> <div> <pre contenteditable="true">a</pre><pre contenteditable="true">b</pre><pre contenteditable="true">c</pre> </div> </body></html> if you try this code in opera or firefox you cannot move caret between 'a','b' & 'c' character.But in below case (2) code you can do: <html> <head> <style type="text/css"> pre{ display:inline; } </style> </head> <body> <div contenteditable="true"> <pre>a</pre><pre>b</pre><pre>c</pre> </div> </body></html> But using code (2) <div contenteditable="true"> <pre onkeypress="alert('keypress')">a</pre><pre onkeypress="alert('keypress')">b</pre><pre onkeypress="alert('keypress')">c</pre> </div> onkeypress event is not caught to move space & caret to new <pre> tag.in case of (1) - I should manually move caret between <pre> tags. I do not know how to.in case of (2) - I do not know how to catch event for each <pre> tag individually. Link to comment Share on other sites More sharing options...
abrakatabra Posted May 23, 2010 Author Share Posted May 23, 2010 really, it is an attempt to implement syntax highlight text editor. Each <pre> tag has its own style to mark out special words. Link to comment Share on other sites More sharing options...
abrakatabra Posted May 23, 2010 Author Share Posted May 23, 2010 in case of (1) - I should manually move caret between <pre> tags. I do not know how to.More exactly, it is not so easy. So I prefer to catch keypress events for each <pre> tag.in case of (2) - I do not know how to catch event for each <pre> tag individually.This is my question:<html> <body> <div contenteditable="true"> <pre onkeypress="alert('event is caught')">a</pre> </div> </body></html> why when I type something between <pre></pre> tag alert does not show dialog with message 'event is caught'? Link to comment Share on other sites More sharing options...
thescientist Posted May 23, 2010 Share Posted May 23, 2010 to catch each <pre> tags events uniquely, you should pass it's id to the function so it knows where its coming from/going to. Link to comment Share on other sites More sharing options...
abrakatabra Posted May 23, 2010 Author Share Posted May 23, 2010 to catch each <pre> tags events uniquely, you should pass it's id to the function so it knows where its coming from/going to.Which function should I pass id, on which event?I would like to do so<html> <body> <div contenteditable="true"> <pre onkeypress="some_function(this)">a</pre> </div> </body></html> but unfortunately, keypress event is not thrown by unknown reason for me. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.