jQuery UI Widgets Forums Editors Editor Disable Tab

Tagged: 

This topic contains 1 reply, has 2 voices, and was last updated by  Hristo 1 month, 3 weeks ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Disable Tab Posts
  • Disable Tab #108067

    fresler
    Participant

    Is there a way to disable the tab key in the editor and have it just go to the next field in the form?

    Disable Tab #108068

    Hristo
    Participant

    Hello fresler,

    You could miss the tabbing inside the jqxEditor as you catch that key pressing.
    Please, take a look at this example:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id='Description'>jqxEditor represents a ready-for-use HTML editor which can simplify web content creation or be a replacement of your HTML Text Areas.</title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />	
        <script type="text/javascript" src="../../scripts/jquery-1.12.4.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdropdownbutton.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcolorpicker.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxeditor.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#editor').jqxEditor({
                    height: 400,
                    width: 400
                });
    
                var iframe = $('#editor').find("iframe");
    
                iframe.contents()[0].addEventListener("keydown", function (event) {
                    if (event.keyCode == 9) {
                        $("#click").focus();
                    }
                });
            });
        </script>
    </head>
    <body>
        <input type="text">
    
        <textarea name="editor" id="editor">
            <b>jqxEditor</b> is a HTML text editor designed to simplify web content creation. You can use it as a replacement of your Textarea or you can create it from a DIV element. 
            <br />
            <br />
            Features include:
            <br />
            <ul>
                <li>Text formatting</li>
                <li>Text alignment</li>
                <li>Hyperlink dialog</li>
                <li>Image dialog</li>
                <li>Bulleted list</li>
                <li>Numbered list</li>
            </ul>
        </textarea>
    
        <button id="click">Click</button>
    
        <input id="example" type="checkbox" name="example">
        <label for="example">Example</label>
    </body>
    </html>
    

    If this does not help you please clarify your case.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.