jQuery UI Widgets › Forums › Editors › Editor › Disable Tab

Tagged: 

This topic contains 1 reply, has 2 voices, and was last updated by  Hristo 4 years, 8 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Disable Tab Posts
  • February 11, 2020 at 10:34 pm 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?

    February 12, 2020 at 1:36 pm 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

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.