禁用 HTML 表单中的选项卡答案

【问题标题】：Disable tab in HTML form禁用 HTML 表单中的选项卡
【发布时间】：2018-02-10 04:45:08
【问题描述】：

我想为我的网页制作一个编辑器，以便我可以轻松地编辑我的网页。我正在为编辑器使用textarea。 textarea 在表单内。

因此，如果我使用制表符缩进，光标会跳转到提交按钮。

我找到了一些将 tabindex 设置为 -1 的方法，但这无济于事。

有什么方法可以禁用标签功能吗？

<form method='GET' action='pages/save.php'>
 <textarea id='textbox' class='form-control' name='textarea' rows='20' cols='80'></textarea><br />
  <input id='safebutton' type='submit' value='Save' />
 </form>

【问题讨论】：

添加按键监听。如果是tab - 做点什么。
How to handle <tab> in textarea?的可能重复
这个问题是你想要的？ stackoverflow.com/questions/6637341/…
你可以使用 jqurey 来做到这一点： $(document).keydown(function (e) { var keycode = (e.keyCode ? e.keyCode : e.which); if (keycode == 9 ) { e.preventDefault(); e.stopPropagation(); } });
@MichaelHIrschler 我已经尝试过了。我会再试一次。也许我犯了一个错误。

标签： javascript html forms

【解决方案1】：

通过这个Fiddle

你会得到你想要的。

HTML：

<textarea placeholder='Enter text Here....'>

</textarea>

css：

textarea{

height:250px;
  width:100%;
}

JS：

$("textarea").keydown(function(e) {


 if(e.keyCode === 9) { 
        var start = this.selectionStart;
            end = this.selectionEnd;

        var $this = $(this);

        $this.val($this.val().substring(0, start)
                    + "\t"
                    + $this.val().substring(end));

        this.selectionStart = this.selectionEnd = start + 1;

        return false;
    }
});

【讨论】：

欢迎您@Bolphgolph。