javascript - When Listening to Ctrl + B event, Bookmark tab shows up -
i trying implement ctrl+b
contenteditable
div should make text bold.
the problem i'm getting when ctrl+b
pressed, browser's bookmark tab appears.
(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>
please me find way disable bookmark when i'm focussed inside editable div.
check solution
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 key up/down + 'n', resetting)"); g_state = 0; } else { if (eve.shiftkey && (eve.which === 78)) { alert("(eve.shift + 'n')"); } else { alert("pass"); } } } }); });
hi dangling cruze,
here there no rocket science , doing here prevent event bubing. , stopping event reach @ web browser. preventdefault() method cancels event if cancel-able, meaning default action belongs event not occur. in single term
for example, can useful when:
clicking on "submit" button, prevent submitting form clicking on link, prevent link following url @ document level binding main 3 event keydown keyup keypress , identifying key combination prevent key combination being used browser well.
let me know if require further help
Comments
Post a Comment