SerenityNetworks Posted March 10, 2015 Share Posted March 10, 2015 I have the page below that notes a keypress event and the time it occurred. This works fine. But I would also like to keep a log of all keypress events that occur and have the ability to turn the logging off and on. I would prefer for the log to be kept in an editable field that I can copy and paste into Excel sometime later. Would someone please show me how this is done or point me to examples for the functions needed? Please guide me where I may be wrong, but I'm thinking I need: An example showing me how to turn the logging function off and on. An example showing me how to append to the log with each keypress event that occurs while the logging is turned on. How to keep or make the log field editable. Example for use:I'm logging key presses. (I'll be observing events in a video and I will press a designated key or number when certain events occur.) I want to stop and make a note of some observation. I turn off the logging. I enter my notes in the field where the log entries are being recorded. I turn back on the logging and continue the exercise. The log would look something like: Event: s | 1:32:09 AMEvent: s | 1:32:48 AMEvent: j | 1:33:00 AMEvent: 5 | 1:33:18 AM I turned off logging, made this note, and turned logging back on.Event: r | 1:34:06 AMEvent: s | 1:34:18 AM Any help with this will be greatly appreciated. Thanks in advance, Andrew The Current Web Page Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><title>Key Events 01</title></head><body onkeypress="myFunction(event)"><p id="demo"></p><script>function myFunction(event) { var kp = event.which || event.keyCode;//returns the unicode number var kp = String.fromCharCode(kp);//converts the unicode number to the key value var d = new Date(); var d = d.toLocaleTimeString(); document.getElementById("demo").innerHTML = "The key pressed is is: " + kp + ". The time is: " + d;}</script></body></html> Link to comment Share on other sites More sharing options...
alexpnd Posted March 10, 2015 Share Posted March 10, 2015 (edited) I changed the event binding from onkeypress to onkeyup in order to capture the ESCAPE key as the default "stop logging" button. If you don't want to use the escape key then you can use a button and go back to keypress. I use a global "loggingEnabled" boolean to determine whether or not to log keys as they come in. Finally I detect to show the log using some style properties "block" can be thought of as "visible".Edit: I see you want notes interspersed as well. The trouble is now that you are mixing formats. You want two different outputs, one HTML and one CSV. The CSV you'll use for excel and HTML you'll use while your using the tool. I would log everything into an array interspersing notes and keystrokes data, and then I would create a function outputting notes + keystrokes data, and one for just keystrokes (for your Excel). PM if you need help. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><title>Key Events 01</title></head><body onkeyup="myFunction(event)"><p id="demo">The key pressed is is: null. The time is: 0:00:00 AM</p> <a href="#" id='show-log' onclick="toggleLogDisplay();">Toggle Log Display</a><pre id='log' style="display:none">key, timestamp<pre> <script>var loggingEnabled = true;function myFunction(event) { var kp = event.which || event.keyCode;//returns the unicode number if (kp == 27){//escape key to disable loggingEnabled = !loggingEnabled; document.getElementById("demo").innerHTML = "Disabled"; } if (!loggingEnabled){ return; } var kp = String.fromCharCode(kp);//converts the unicode number to the key value var d = new Date(); var d = d.toLocaleTimeString(); document.getElementById("demo").innerHTML = "The key pressed is is: " + kp + ". The time is: " + d; //Add to the log, since it's in a <pre> tag we can use newlines and they will be displayed as well document.getElementById("log").innerHTML += kp + "," + d + "n";}function toggleLogDisplay(event){ var el = document.getElementById('log'); var style = el.style.display; el.style.display = style == "block" ? "none" : "block"; event.preventDefault();//we don't want the browsers default link behavior}</script></body></html> I have the page below that notes a keypress event and the time it occurred. This works fine. But I would also like to keep a log of all keypress events that occur and have the ability to turn the logging off and on. I would prefer for the log to be kept in an editable field that I can copy and paste into Excel sometime later. Would someone please show me how this is done or point me to examples for the functions needed? Please guide me where I may be wrong, but I'm thinking I need: [*]An example showing me how to turn the logging function off and on.[*]An example showing me how to append to the log with each keypress event that occurs while the logging is turned on.[*]How to keep or make the log field editable.[*]Example for use:[*]I'm logging key presses. (I'll be observing events in a video and I will press a designated key or number when certain events occur.)[*]I want to stop and make a note of some observation.[*]I turn off the logging.[*]I enter my notes in the field where the log entries are being recorded.[*]I turn back on the logging and continue the exercise. The log would look something like: Event: s | 1:32:09 AMEvent: s | 1:32:48 AMEvent: j | 1:33:00 AMEvent: 5 | 1:33:18 AM I turned off logging, made this note, and turned logging back on.Event: r | 1:34:06 AMEvent: s | 1:34:18 AMAny help with this will be greatly appreciated. Thanks in advance,Andrew The Current Web Page Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><title>Key Events 01</title></head><body onkeypress="myFunction(event)"><p id="demo"></p><script>function myFunction(event) { var kp = event.which || event.keyCode;//returns the unicode number var kp = String.fromCharCode(kp);//converts the unicode number to the key value var d = new Date(); var d = d.toLocaleTimeString(); document.getElementById("demo").innerHTML = "The key pressed is is: " + kp + ". The time is: " + d;}</script></body></html> ---www.introtojavascript.comwww.rapineda.com - software consulting Edited March 10, 2015 by alexpnd Link to comment Share on other sites More sharing options...
SerenityNetworks Posted March 10, 2015 Author Share Posted March 10, 2015 (edited) Wow! Thank you! This is great. [updated Wednesday, 3/11, morning] Normally, I'd agree about mixing formats, but for this use it is actually preferred. I've modified the code a bit to use a pipe as the delimiter and the one or two users will know to append any edits after adding another pipe (which upon import to Excel will simply make three columns instead of two. (Even if they don't, correction will be easy.) Another reason for allowing the field to be editable is to allow users to edit or completely delete log entries. (For example, the user presses "2" but should have pressed "3". I need for them to be able to pause the system, change the entry, then re-enable the logging and then continue.) I want to keep it very simple. I don't need a lot of rules protection, or error handling. Manual edits within the field are desired for my purposes. Here's where I stand now: I can get the log to appear in a TextArea. This works fine initially, but once I've clicked in the TextArea then logging will no longer appear in the TextArea (even if I later remove focus from the field). If I can get the logging to continue in the TextArea after edits are made then I have my solution! The log records uppercase letters regardless of whether caps lock is on or not. I can't see where this is happening. It's not a show-stopper, but I'd rather it just recorded the key as it was pressed. The log records a letter when a number on the numeric keypad is pressed! This IS a show-stopper. Most of the entries made will be on the numeric keypad. The log needs to record the number, not a letter. I don't see where this conversion is occurring. The code for capturing the unicode and then converting it to the character is unchanged from my initial working example. Thanks again, Andrew CURRENT CODE: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><title>Key Events 02</title></head><body onkeyup="mainFunction(event)"><p id="toggleLog">Press ESC to start logging or use one of the buttons below.</p><button onclick="toggleLogDisplay();" id="buttonText01">Display the Log</button> <button onclick="toggleLogButton(event);" id="buttonText02">Start Logging Keystrokes</button><br/><br/><!-- Original suggestion. The log works, but it needs to be editable. --><pre id='log' style="display:none">Code | Timestamp | Notes<br/></pre><br/><br/><!-- The following lets the user add text to the log, but once the field has been selected then no further log entries are made. --><textarea id='myTextArea' align="left" style="height:200px;width:350px;border:1px solid #ccc;font:Arial, Helvetica, sans-serif;overflow:auto;"></textarea><script>var loggingEnabled = false;function mainFunction(event) { var kp = event.which || event.keyCode;//returns the unicode number if (kp == 27){//escape key to disable loggingEnabled = !loggingEnabled; var bt3; bt3 = loggingEnabled; if (bt3 == true) {bt3 = "Disable Logging";} else {bt3 = "Enable Logging";} document.getElementById("buttonText02").innerHTML = bt3; } if (!loggingEnabled){ return; } var kp = String.fromCharCode(kp);//converts the unicode number to the key value var d = new Date(); var d = d.toLocaleTimeString(); document.getElementById("toggleLog").innerHTML = "Key logging is enabled. The last key pressed was: " + kp + " at " + d; //Add to the log, since it's in a <pre> tag we can use newlines and they will be displayed as well document.getElementById("log").innerHTML += kp + " | " + d + " | " + "n"; //The following adds the log to the TextArea, but once edited then logging stops - if fixed then this is solution document.getElementById("myTextArea").defaultValue += kp + " | " + d + " | " + "n"; }function toggleLogButton(event){ var bt2; bt2 = loggingEnabled; loggingEnabled = !loggingEnabled; bt2 = loggingEnabled if (bt2 == true) {bt2 = "Disable Logging";} else {bt2 = "Enable Logging";} document.getElementById("buttonText02").innerHTML = bt2; mainFunction(event); }function toggleLogDisplay(event){ var el1 = document.getElementById('log'); var style = el1.style.display; var bt1; el1.style.display = style == "block" ? "none" : "block"; if (style == "none") {bt1 = "Hide the Log";} else {bt1 = "Display the Log";} document.getElementById("buttonText01").innerHTML = bt1; event.preventDefault();//we don't want the browsers default link behavior}</script></body></html> Edited March 11, 2015 by SerenityNetworks Link to comment Share on other sites More sharing options...
alexpnd Posted March 12, 2015 Share Posted March 12, 2015 Change this document.getElementById("myTextArea").defaultValue += kp + " | " + d + " | " + "n";to thisdocument.getElementById("myTextArea").value += kp + " | " + d + " | " + "n";and for your numpad issue change onkeyup to onkeypress in your body (again). They seem to handle keycodes differently. 1 Link to comment Share on other sites More sharing options...
SerenityNetworks Posted March 12, 2015 Author Share Posted March 12, 2015 That is phenominal. Thank you. (I don't want to say how long I looked at the TextArea line and never noted the word 'default' ) Thanks again! Andrew Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now