asp.net ASPxTextBox and other controls to achieve 'carriage return simulation Tab' common code arrangement

  • 2020-05-09 18:21:40
  • OfStack

Recently I was working on an Web project, and I used DevExpress third party control.
Due to the control of the use of Chinese information technology is less, really bad, can only grope, while the development.

Today I am going to implement some edit boxes such as ASPxTextBox, ASPxComboBox and so on control enter to simulate the function of Tab. You can't help it, users are so used to carriage return that they hate pressing Tab to move the focus (mouse clicks are more cumbersome).

In the case of ASPxTextBox, many client JavaScript codes can be set in the ClientSideEvents property, of which KeyPress is what I want to write.

First of all, I have to prepare to simulate Tab JS code, there are many on the Internet, I randomly D 1, try useful, posted as follows:

// Enter key simulation tab  in onkeydown In the  
function EnterAsTab() 
{ 
var el_keydown=window.event.srcElement; 
  var len; 
if ((window.event.keyCode==13&&el_keydown.type!="textarea") 
|| (window.event.keyCode==13 && window.event.ctrlKey && el_keydown.type=="textarea")) 
{ 
len = document.forms(0).length; 
    for (var i=0;i<len;i++) 
    {     
      if (document.forms(0).elements(i)==el_keydown) 
      { 
        // skip hidden , disabled Type of input box  
        // If the next control is a button , Also ask to skip again 1 a , Until non-button or no control  
        do 
         {         
           i++; 
           if(i>=len) 
           return; 
         } 
         while ((document.forms(0).elements(i).disabled||document.forms(0).elements(i).type=='hidden' 
           || document.forms(0).elements(i).type=='button' 
           || document.forms(0).elements(i).type=='submit' 
           || document.forms(0).elements(i).type=='reset' 
           || document.forms(0).elements(i).type=='href')); 
         //alert(' object '+i+' type :'+document.forms(0).elements(i).type); 
         document.forms(0).elements(i).focus(); 
         document.forms(0).elements(i).select(); 
        event.returnValue=false; // Discard unwanted enter or enter textarea , button Will send the return directly!  
        return; 
      } 
    } 
  } 
}

Next, the KeyPress event code is inserted into the HTML code of the ASPxEditBox control.
 
<dxe:ASPxTextBox ID="txtCodeName" runat="server" Width="170px" 
Text='<%# Bind("CodeName") %>'> 
<ClientSideEvents KeyPress="function(s,e){var key = event.keyCode; 
if( key==13){EnterAsTab();}}" /> 
</dxe:ASPxTextBox> 

Get the key value event.keyCode and assign it to key. Then determine if the key value is equal to 13 (enter key), and if so, call the previous JS function EnterAsTab().
Other controls are similar.

Related articles: