1

我已经找了几个小时了，仍然无法解决。

所以我正在开发一个文本编辑器，我想要它，所以当他们按下“ tab ”键时，它会缩进文本，或者是我选择的文本，或者是光标文本选择器前面的文本。我一直在研究设计模式，我试图制作一个元素设计模式，但除非我做错了，否则你做不到。这是我的代码，它启动了我的简单编辑器

 $(".code").click(function () {
   $(".code").attr('contenteditable', 'true');
   document.getElementById("code").designMode = "on";
 });

然后是' tab key code '

$(".code")
  .keydown(function (e) {      
  var keyCode = e.keyCode || e.which;
  if(keyCode == 9) {
    e.preventDefault();

  }
});

问题：你如何在 contenteditable 中缩进，例如在文本编辑器中你可以不缩进任何内容或文本。（我的关键事件没有触发没有任何问题）

这不是文本区域或输入框，它只是一个内容可编辑的 div

4

2 回答 2

3

所以我想通了，代码如下

$(".code").keydown(function(e)
           {
              e = e || window.event;
              var keyCode = e.keyCode || e.which; 
              if (keyCode == 9)
              {
                e.preventDefault();
                  document.execCommand('styleWithCSS',true,null);
                  document.execCommand('indent',true,null);
              }
           });
于 2013-03-06T03:35:54.793 回答
0

我假设 $(".code") 是一个文本区域，当它被聚焦并在 keydown 上时会发生事件。

$(function(){
    var c = $(".code");
    c.keydown(function (e) {
      e = e || window.event;
      var keyCode = e.keyCode || e.which;
      if(keyCode === 9) {
        e.preventDefault();

        $(this).val($(this).val().substring(0,$(this).get(0).selectionStart) + "\t" + $(this).val().substring($(this).get(0).selectionEnd));
      }
    });
});

示例：

http://jsfiddle.net/hXxU9/

于 2013-03-06T01:43:49.730 回答