Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Editor > How to block the tab key in rad editor

• Uma

  Posted on Feb 2, 2012 (permalink)

  I am using editor.
  
  I need to restrict the user to modify the content of editor based on some condition
  
  so, i block the editor by onkeydown event.
  

  editor.attachEventHandler("onkeydown", function (e) {

                 keepGoing = true;

   

                 var keyCode = ('which' in e) ? e.which : e.keyCode;

                 edittingKey = (keyCode == 8 /*backspace*/) || (keyCode == 46 /*delete*/) || (keyCode == 9 /*tab*/);

                 if (edittingKey) {

                    

                     keepGoing = false;

                  

   

                 }

   

                 return keepGoing;

             });

  
  
  i need to this in IE(. it works well for delete and back space. but not work in tab key.
  
  it event is fired on pressing tab key, my code return false also.
  but, editor shows the tab space between two letters, if the user press tab between two letters.
  
  i need to avoid this.
  
  Thanks,
  Uma

  Reply

• Rumen Rumen

  Posted on Feb 2, 2012 (permalink)

  Hello,
  
  To disable the insertion of four   entities when the Tab is pressed in the content area execute this method:

  editor.removeShortCut("InsertTab"); 

  
  

  <telerik:RadEditor ID="RadEditor1" runat="server" OnClientLoad="OnClientLoad"></telerik:RadEditor>

  <script type="text/javascript">

      function OnClientLoad(editor) {

          editor.removeShortCut("InsertTab");

          editor.attachEventHandler("onkeydown", function (e) {

              keepGoing = true;

              var keyCode = ('which' in e) ? e.which : e.keyCode;

              edittingKey = (keyCode == 8 /*backspace*/) || (keyCode == 46 /*delete*/) || (keyCode == 9 /*tab*/);

              if (edittingKey) {

                  alert(1);

                  keepGoing = false;

              }

              return keepGoing;

          });

      }

  </script>

  
  You can also cancel the events using $telerik.cancelRawEvent(e);
  Kind regards,
  Rumen
  the Telerik team

  If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now

  Reply


• Uma

  Posted on Feb 2, 2012 (permalink)

  Hi Rumen,
  
  Thanks for your quick reply.
  
  But, i need to block the tab based on some condition.
  
  for example , my content is like

  <div style="border: 1px solid red;" contentEditable="true" unselectable="off" noneditable="true">

      Testing DIV Non Editable AREA

      <span style="border: 1px solid green;" contentEditable="true" unselectable="off" noneditable="false">

          <!--Content name="info" -->

            span  testing  Editable REGION...

          <!--/Content -->

      </span>

      Non Editable AREA

  </div>

  so, i need to allow the the user, if the slected tag has the attribute noneditable="false".
  
  so, i check in the key event like

  editor.attachEventHandler("onkeydown", function (e) {

                 keepGoing = true;

   

                 var keyCode = ('which' in e) ? e.which : e.keyCode;

                 edittingKey = (keyCode == 8 /*backspace*/) || (keyCode == 46 /*delete*/) || (keyCode == 9 /*tab*/);

                 if (edittingKey) {

                     var SelectedTag = editor.getSelectedElement();

                     keepGoing = !SelectedTag.getAttribute("noneditable");

                     //Uma(2-Feb-2012 : Block the tab key pressing for user

                        $telerik.cancelRawEvent(e);
                             return false; 


                 }

   

                 return keepGoing;

             });

  so, using

  editor.removeShortCut("InsertTab"); 

  it blocks the tab for all elements.
  i used the  cancelRawEvent(e) also, but still the tab is working. 
  
  how to slove this?
  
  Thanks ,
  Uma

  Reply

• Rumen Rumen

  Posted on Feb 3, 2012 (permalink)

  Hello,
  
  The default behavior of the Tab key in an editable iframe is to pass through it and goes to the next element of the page as you can see in the attached editableiframe HTML page. Since RadEditor does not offers out-of-the box the requested functionality my suggestion is to implement it with an editable div or iframe and provided the working code. We will replace the div / iframe with RadEditor and send you the updated solution.
  
  Best regards,
  Rumen
  the Telerik team

  If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Editor > How to block the tab key in rad editor