javascript - 是否可以为 HTML Jquery 中可编辑的内容编写自己的热键？

Question

实际上，如果我们在可编辑的内容中使用Ctrl+B，它会创建一个标签

<b>Content goes here... </b> like this.

我们可以添加自己的热键吗，例如

Ctrl+T

<a class="tamil">Content goes here...</a>

Ctrl+E

<a class="tamil">Content goes here...</a>

请帮助解决这个问题，在此先感谢您。

Answer 1

使用 jQuery 非常简单:

您可以将 keydown-EventListener 添加到每个 contenteditable 元素(或只是 div，只要适合您的目的)，您甚至可以在其中消除标准的浏览器行为:

$('[contenteditable=true]').keydown(function(e){
    if(e.ctrlKey && e.keyCode == 70){
        e.preventDefault();
        $('#result').append('CTRL + F registered. ');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contenteditable=true>
    <p>Some text in here</p>    
</div>

<p id="result"></p>

只有当 contenteditable 元素获得焦点时才会触发此事件监听器，因此如果它没有获得焦点，您的组合键的标准浏览器功能仍然会被触发。

针对最新版本的 chrome、firefox 和 ie 进行了测试。