2015-06-01 2 views
0

Я пытаюсь реализовать Ctrl + B для contenteditable DIV, который должен сделать текст жирным шрифтом.При прослушивании события Ctrl + B, закладка Закладка показывает вверх

Единственная проблема, я получаю то, что когда Ctrl + B нажата, появляется вкладка закладок браузера.

(fiddle)

$(document).ready(function() { 
 
    $('#editable').designMode = 'on'; 
 
    $('#editable').on('keyup', function(e) { 
 
     console.log(e.which); 
 
     if(e.which == 66 && e.ctrlKey) { 
 
      e.preventDefault(); 
 
      console.log('bold'); 
 
      document.execCommand ('bold', false, null); 
 
      return false; 
 
     } 
 
    }); 
 
});
#editable { 
 
    width:200px; 
 
    height:100px; 
 
    border:1px solid #999; 
 
    border-radius: 3px; 
 
    padding: 10px; 
 
    box-sizing:border-box; 
 
} 
 

 
#editable:focus { 
 
    outline: none; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div contenteditable="true" id="editable"></div>

Пожалуйста, помогите мне найти способ отключить эту закладку, когда я сосредоточен внутри этого редактируемые дел.

+0

, какой браузер? скрипка работает как ожидалось в chrome/osx –

+0

работает в chrome/win8 –

+0

firefox on ubuntu –

ответ

2

проверить это решение

jsFiddle

var g_state = 0; 
$(document).ready(function() { 
    $('body').keydown(function (eve) { 
     if (eve.which === 17) { 
      eve.preventDefault(); 
      g_state = 1; 
     } 
     return true; 
    }); 
    $('body').keyup(function (eve){ 
     if (eve.which === 17) { 
      eve.preventDefault(); 
      g_state = 0; 
     } 
     return true; 
    }); 
    $('body').keypress(function (eve) { 
     eve.preventDefault(); 
     if (eve.ctrlKey && (eve.which === 78)) { 
      alert("(eve.ctrl + 'n')"); 
     } 
     else { 
      if (g_state && (eve.which === 78)) { 
       alert("(ctrl tracking by key up/down + 'n', resetting)"); 
       g_state = 0; 
      } 
      else { 
       if (eve.shiftKey && (eve.which === 78)) { 
        alert("(eve.shift + 'n')"); 
       } 
       else { 
        alert("pass"); 
       } 
      } 
     } 
    }); 
}); 

Привет оборванной Cruze,

Здесь нет какого-либо ракетостроение, что мы делаем здесь, чтобы предотвратить bubing события. И остановка события для веб-браузера. Метод preventDefault() отменяет событие, если оно отменено, что означает, что действие по умолчанию, принадлежащее событию, не будет выполнено. В один срок

Например, это может быть полезно, когда:

Clicking on a "Submit" button, prevent it from submitting a form 
Clicking on a link, prevent the link from following the URL 

At the document level we are binding all main three event 
    keydown 
    keyup  
    keypress 

and identifying key combination as well to prevent some key combination that is being used by browser as well. 

дайте мне знать, если вам потребуется дополнительная помощь

+0

Это работает Но я не могу понять, что там происходит. Можете ли вы дать какое-то объяснение? –

+1

@DanglingCruze просто дайте мне немного минут, я занят какой-то задачей, когда-то сделаю это, и я объясню вам и ваше понимание. –

+0

Конечно. Спасибо за ваше время в любом случае :) –