Keyboard support with IE9

2 posts, 1 answers
  1. Shoshanah
    Shoshanah avatar
    10 posts
    Member since:
    Feb 2009

    Posted 10 May 2012 Link to this post

    I am implementing RadAsyncUpload, and need to give keyboard-only users the ability to browse for files to upload. 
    Following the Keyboard Support section of the demo site, I have set DisablePlugins=True, and added the recommended javascript to enable the tab and accesskey support. 

    I am running into the following issues:
    * Tabbing to the control and Select button works, but the Enter key does not activate selection of a file.  
    * The accesskey does not activate the Select button at all. 

    Any demos/help would be greatly appreciated! 

    Here's the code I'm using:

    <table id="Table11" cellspacing="1" cellpadding="1" runat="server">
               <tr >
                <td valign="bottom">
                <telerik:RadAsyncUpload
                         ID="RadAsyncUpload1"
                         EnableTheming="true"        TabIndex="1"
                         runat="server"
                         Width="300px"              
                         TargetFolder="~/App_Data"
                         MultipleFileSelection="Automatic"
                         OnClientAdded="keyboardSupport"
                         AccessKey="K"
                         OnClientFileUploading="onClientFileUploading"
                         DisablePlugins="true"/>
                </td>
            </tr>
    </table>
     
    <script language="javascript" type="text/javascript">
     
      var $ = $telerik.$;
      var $cancelButton;
     
      // keyboardSupport() method activates focusing with TAB key
      function keyboardSupport(sender, args) {
        var $fileInput = $(".ruFileInput", args.get_row());
        $fileInput.attr("tabindex", "1")
     
        var $selectButton = $(".ruButton.ruBrowse", args.get_row());
     
        $fileInput.focus(function (e) {
          $selectButton.css("border", "1px dotted");
        });
     
        $fileInput.blur(function (e) {
          $selectButton.css("border", "0px");
        });
     
        $fileInput.keydown(function (event) {
     
          if (event.keyCode == '13') {
            event.preventDefault();
          }
     
        });
     
        if ($telerik.isIE) {
          $fileInput.keydown(function (e) {
            if (e.keyCode == Sys.UI.Key.tab && e.shiftKey == false) {
              $fileInput.parent().focus();
            }
            if (e.keyCode == Sys.UI.Key.tab && e.shiftKey == true) {
              e.preventDefault();
              if ($cancelButton != undefined)
                $cancelButton.focus();
              else
                $fileInput.parent().focus();
            }
          });
        }
      }
     
      function onClientFileUploading(sender, args) {
        $(".ruFileInput", args.get_row()).attr("tabindex", "-1");
     
        $cancelButton = $(".ruCancel", args.get_row());
        $cancelButton.attr("tabindex", "1");
      }
     
      $(document).keydown(function (e) {
        var accesskey = $find("<%=RadAsyncUpload1.ClientID%>")._accessKey;
      
        if ($telerik.isFirefox) {
          if (e.altKey == true && e.shiftKey == true && e.which == accesskey.charCodeAt()) {
            focusOnFirstInput();
          }
        }
     
        if ($telerik.isChrome || $telerik.isSafari || $telerik.isIE) {
     
          if (e.altKey == true && e.which == accesskey.charCodeAt()) {
            focusOnFirstInput();
          }
        }
      });
     
      function focusOnFirstInput() {
        var firstInput = $("input[type='file']", $get("<%=RadAsyncUpload1.ClientID%>"))[0];
        if (firstInput != undefined) {
          firstInput.focus();
        }
      }
      
      </script>
  2. Answer
    Bozhidar
    Admin
    Bozhidar avatar
    1188 posts

    Posted 15 May 2012 Link to this post

    Hello Shoshanah,

    I've modified the page to make it work in IE9 as well. You can find it attached to this reply.
     
    Kind regards,
    Bozhidar
    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.
Back to Top