 Enter key start onblur event and not onkeyup/onkeydown, Enter key start onblur event and not onkeyup/onkeydown |
  |
| naamabm |
 Jul 18 2012, 12:48 AM
Post
#1
|
|
Group: Members Posts: 5 Joined: 18-July 12 Member No.: 17,461  |
On my web I display configuration info, that user can edit, in a table.
The correct user behavior should be to press Enter key after editing the field in order to set the changes. If he "leaves" the field without pressing Enter- the changes will be dismiss. In order to do that- I use "onkeyup" and "onblur" "onkeyup" (1) set a flag that field's content has been changed (2) if the key is Enter (==13) , it sends the server a set request with the current value (*) also tried "onkeypress" or "onkeydown" "onblur" - check the flag if the field's content has been changed. if so- send a refresh request to server that re-send current saved data (and erase user's changes). I recently noticed that while it works great in Chrome, on Explorer pressing the Enter key sets both events, and sometimes only the "onblur" event, thus ignores user's requests.... Do you have any idea how to deal with it? THANKS!!!! |
  |
 
|
| Christian J |
Jul 18 2012, 08:42 AM
Post
#2
|
|
.  Group: WDG Moderators Posts: 4,765 Joined: 10-August 06 Member No.: 7 |
Can't say without seeing a sample page/code.
Could it be that pressing the Enter key submits the whole form (assuming you use a FORM element and not just textfields with Javascript/Ajax)? |
 |
|
| naamabm |
Jul 29 2012, 02:41 AM
Post
#3
|
|
Group: Members Posts: 5 Joined: 18-July 12 Member No.: 17,461 |
no, there are no form type objects in the form, only text and button.
The Enter -key is pressed within a text box. What is the best way to attach sample code? I am new here... This post has been edited by naamabm: Jul 29 2012, 02:42 AM |
|
|
|
| naamabm |
Jul 29 2012, 03:15 AM
Post
#4
|
|
Group: Members Posts: 5 Joined: 18-July 12 Member No.: 17,461 |
......
<!-- Line LO freq --> <tr> <td><div id=div_lof_a><a href="manual.html#lof_mod" target="_blank">BUC LO Freq</a></div></td> <td><div id=div_lof_select><input id="lof" value="" onkeyup="set_is_unsaved_change();if ((event.keyCode==13) && (div_img_no_touch.className=='no_touch_hide') && (is_positive_num(this))) {div_img_long_action.className='wait_img_show';div_img_no_touch.className='no_touch_show';updateStatusParams('query.fcgi','form_state=2&form_name=line_mod&field_name=lof&field_val='+this.value);reset_is_unsaved_change();}" onblur="if(is_set_unsaved_change()) {reset_is_unsaved_change();updateStatusParams('query.fcgi','form_state=1&form_name=line_mod');}"></div></td> </tr> ............... |
|
|
|
| Frederiek |
Jul 29 2012, 03:20 AM
Post
#5
|
|
Programming Fanatic Group: Members Posts: 3,541 Joined: 23-August 06 From: Europe Member No.: 9 |
Take a look in the Help of the forum : http://forums.htmlhelp.com/index.php?act=Help
in reply to: QUOTE What is the best way to attach sample code? I am new here... This post has been edited by Frederiek: Jul 29 2012, 03:21 AM -------------------- "The earth does not belong to us. We belong to the earth."
from Vue du ciel (in French) "Leave scepticism to others and take action" from HOME by Goodplanet An inconvenient truth by Al Gore |
|
|
|
| naamabm |
Jul 29 2012, 03:46 AM
Post
#6
|
|
Group: Members Posts: 5 Joined: 18-July 12 Member No.: 17,461 |
Thanks.
Any suggestions for my problem...? |
|
|
|
| Christian J |
Jul 29 2012, 07:30 AM
Post
#7
|
|
. Group: WDG Moderators Posts: 4,765 Joined: 10-August 06 Member No.: 7 |
I get two alertboxes in both Firefox and IE with this:
CODE <input type="text" name="foo" value="bar" onkeyup="alert('keyup');" onblur="alert('blur');"> Maybe the "keyup" alertbox makes the field lose focus, which in turn trigs the onblur event as well? There's a lot missing in your code sample. Could it be that some of the missing javascript functions make your text field lose focus? |
|
|
|
| naamabm |
Jul 30 2012, 01:43 AM
Post
#8
|
|
Group: Members Posts: 5 Joined: 18-July 12 Member No.: 17,461 |
Hi
Here is a more detailed sample code: ------------------------------------------------------------------------------------------ CODE <!DOCTYPE HTML PUBLIC> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <meta http-equiv="pragma" content="no-cache"/> <meta http-equiv="no-cache"/> <META HTTP-EQUIV="Expires" CONTENT="Wed, 19 Feb 2000 08:00:00 GMT"/> <meta http-equiv="cache-control" content="no-cache"/> <link href="style/style.css?ver=2" rel="stylesheet" type="text/css" /> <title> </title> <script type="text/javascript" src="scripts/src_general.js?ver=3"></script> <script type="text/javascript" src="scripts/src_validate.js?ver=3"></script> <script type="text/javascript" src="scripts/src_request.js?ver=6"></script> <script type="text/javascript" src="scripts/src_table.js?ver=4"></script> <script type="text/javascript" src="scripts/src_filter.js?ver=3"></script> <script type="text/javascript" src="scripts/src_cookie.js?ver=3"></script> <script type="text/javascript" src="scripts/src_title.js?ver=3"></script> <script type="text/javascript" src="scripts/src_login.js?ver=3"></script> <script type="text/javascript" src="scripts/src_logout.js?ver=3"></script> <script type="text/javascript"> /************************************************************ * Explenation: Every 2 seconds check if in "wait" status, if so- re-ask server if action done * On every mouse move (not in wait status) will reset counter. once reach 300 (10 minutes) will log out **************************************************************/ ////////////// INTERVAL: WAIT,REFRESH,LOGOUT ///////////////// var counter=1; function check_finish_wait() { if (is_wait.value == "yes") //ask if need to keep waiting updateStatusParams('query.fcgi','form_state=4&form_name=line_mod'); else { counter++; (counter<30) ? convert_counter=-1 : convert_counter=counter/30; //convert to minutes if (checkLogoutTime(convert_counter)) { counter=1; updateStatusParams('query.fcgi','form_state=2&form_name=logout'); } } } setInterval("check_finish_wait();", 2000); function update_web_server() { updateStatusParams('query.fcgi','form_state=1&form_name=line_mod'); } setInterval("update_web_server();", 150000); </script> </head> <body onload="listenMouseMove();setFpanelHidden();div_img_long_action.className='wait_img_show';div_img_no_touch.className='no_touch_show';updateStatusParams('query.fcgi','form_state=1&form_name=line_mod');showCurLoginUserMsg();displayTitle();"> <div class="menu_nav"> <div class="menu_resize"> <ul> <li id="li_index" class="active"><a href="index.html">home</a></li> <li id="li_login"><a href="login.html">log in</a></li> <li id="li_support"><a href="manual.html" target="_black">manual</a></li> <li id="li_about"><a href="mct_calculator.html">calculator</a></li> <li id="li_contact"><a href="contact.html">contact</a></li> <li class="log_small" id="log_small">not logged in</li> <li> <ul> <li class="temp_days_show" id="temp_days_left"> </li> <li class="db_dirty_hide" id="db_dirty">Configuration not saved</li> </ul> </li> </ul> </div> </div> <div class="footer"> </div> <div class="sidebar"> <div class="sidebarmenu"> <!--#include file="/tmp/include_side_menu.html"--> </div> </div> <div class="content"> <div class="content_resize"> <div class="mainbar"> <div class="config" id="config"> <h2><span>Line</span> settings</h2> <div id=div_error class="no_status_hide">Error occurred. Please try again later.</div> <table id="config_table" cellspacing=4px> <!-- TX state --> <tr> <td><div id=div_tx_state_a><a href="manual.html#tx_state" target="_blank">TX State</a></div></td> <td><div id=div_tx_state_select><select id="tx_state" onchange="div_img_long_action.className='wait_img_show';div_img_no_touch.className='no_touch_show';updateStatusParams('query.fcgi','form_state=2&form_name=line_mod&field_name=tx_state&field_val='+this.value)"> <option value="0">Disable</option> <option value="1">Enable</option> </select></div></td> <td><div> </div></td> </tr> [color=#000066] <!-- Line LO freq --> <tr> <td><div id=div_lof_a><a href="manual.html#lof_mod" target="_blank">BUC LO Freq</a></div></td> <td><div id=div_lof_select><input id="lof" value="" [color=#CC0000]onkeyup[/color]="set_is_unsaved_change();if ((event.keyCode==13) && (div_img_no_touch.className=='no_touch_hide') && (is_positive_num(this))) {div_img_long_action.className='wait_img_show';div_img_no_touch.className='no_touch_show';updateStatusParams('query.fcgi','form_state=2&form_name=line_mod&field_name=lof&field_val='+this.value);reset_is_unsaved_change();}" [color=#CC0000]onblur[/color]="if(is_set_unsaved_change()) {reset_is_unsaved_change();updateStatusParams('query.fcgi','form_state=1&form_name=line_mod');}"></div></td> <td><div>MHz</div></td> </tr> </table>[/color] <div><button type="button" id="saveb" class="button_hide_save_space"; style="width:100px" onclick="div_img_long_action.className='wait_img_show';div_img_no_touch.className='no_touch_show';updateStatusParams('query.fcgi','form_state=2&form_name=line_mod&field_name=saveb')">Save</button></div> <div id=div_img_long_action class="wait_img_hide"><img src="images/ajax-loader.gif"></img></div> <!-- in wait status? --> <input type=hidden id="is_wait" value="no"> </div> </div> </div> </div> <div id=div_img_no_touch class="no_touch_hide"></div> </body> </html> ------------------------------------------------------------------------------------------ and in JS file: ------------------------------------------------------------------------------------------ CODE /////////// DOES NOT SEND BLUR RQUEST IF CLICK WAS MADE //////////// var is_unsaved_change=0; function reset_is_unsaved_change() { is_unsaved_change=0; } function set_is_unsaved_change() { is_unsaved_change=1; } function is_set_unsaved_change() { if (is_unsaved_change==1) return true; return false; } function updateStatusParams(cgi_name,params) { if (checkCurrUser()) params = params+"&session_id="+getCurrUser(); else params = params+"&session_id=0"; //alert("params="+params); loadURL(req, cgi_name, setData, params) } function loadURL(req, url, stateChangeFunction, parameters) { req.value = false; // branch for native XMLHttpRequest object if(window.XMLHttpRequest) { try { req.value = new XMLHttpRequest(); } catch(e) { req.value = false; } // branch for IE/Windows ActiveX version } else if(window.ActiveXObject) { try { req.value = new ActiveXObject("Msxml2.XMLHTTP"); req.value.Cache.SetCacheability(HttpCacheability.NoCache); } catch(e) { try { req.value = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) { req.value = false; } } } if(req.value) { var async = false; if (stateChangeFunction) { req.value.onreadystatechange = stateChangeFunction; async = true; } if (parameters) { req.value.open("POST", url, async); req.value.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); req.value.setRequestHeader("Content-length", parameters.length); req.value.setRequestHeader("Connection", "close"); req.value.send(parameters); } else { req.value.send(""); } } } |
|
|
|
| Christian J |
Jul 30 2012, 09:22 AM
Post
#9
|
|
. Group: WDG Moderators Posts: 4,765 Joined: 10-August 06 Member No.: 7 |
Can't say what the problem is, but here are a few notes:
CODE event.keyCode==13 The above event detection seems insufficient (at least according to http://www.quirksmode.org/js/events_access.html --see section "Combination with inline event handlers" at bottom of page). CODE div_img_no_touch div_img_long_action and other variables that change className are not defined. IMO it's better practice to use document.getElementById() for this, though it seems newer browsers have begun supporting both approaches.  See also http://stackoverflow.com/questions/5042265...-function-existCODE is_positive_num() The above function is not defined. Finally (as a long shot), you might check if the XMLHttpRequest in loadURL() trigs the unwanted blur event somehow (I don't know). |
|
|
|
| Christian J |
Jul 30 2012, 03:31 PM
Post
#10
|
|
. Group: WDG Moderators Posts: 4,765 Joined: 10-August 06 Member No.: 7 |
BTW, this function seems redundant:
CODE function is_set_unsaved_change() { if (is_unsaved_change==1) return true; return false; } if(is_set_unsaved_change()) { .... since you might as well use this: CODE if(is_unsaved_change) { ... (I haven't examined the script closely, though). |
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 22nd May 2013 - 07:20 PM |
Invision Power Board
© 2013 IPS, Inc.
Licensed to: HTMLHelp.com, LLC