This is my first time to write an article. Don’t hesitate to point out any shortcomings. Thanks!!



Background explanation:

Press Ctrl+Enter for a line break as required by the project.



It seems like a pretty simple requirement, just two buttons to do a line break. But when I first encountered it, my first thought was to search baidu to see if there was a code (jio is the dish), and I did find a little code.

Source of inspiration:

Blog.csdn.net/qwh66/artic… , learn from the experience (copy code)

Code:

Code learned:

<script type="text/javascript"> var down=0; // Set the global variable down, which records whether CTRL is pressed; function enter() { if(event.keyCode==17) { down=1; // CTRL press} if(event.keyCode==13) {if(down==1) {document.getelementById ("contend"). Value += '\n'; down=0; }else {document.getelementById (" BTN ").click();}else {document.getelementByid (" BTN "). Document.getelementbyid ("contend").value=""; } } } </script>Copy the code

Own code:

var down = 0; // Set the global variable down, which records whether CTRL is pressed; var messageText = document.getElementById('messageText'); $(document).off('keydown'.'#messageText').on('keydown'.'#messageText'.function(fn){// Keyboard press eventif(fn.keyCode == 17){// Ctrl Down = 1; }if(fn.keyCode == 13){// Press Enterif(down = = 1) {/ / determine whether press Ctrl $(this). Val ($(this). Val () +'\n'); Var scrollTop = messageText. ScrollHeight; $(this).scrollTop(scrollTop); $(document).off('keyup'.'#messageText').on('keyup'.'#messageText'.function(fn){
	if(fn.keyCode == 17){// Release Ctrl Down = 0; } fn. StopPropagation (); // prevent bubbling}); }else{  
      window.event.returnValue = false; }} fn. StopPropagation (); // prevent bubbling});Copy the code


Understanding of code:

If you follow the first code is able to complete line breaks, but I am picky, not satisfied with a single line break.

The second code (that is, my own code) should take into account that the user has to change multiple lines, if the change of multiple lines involves the height of the situation does not change, and has been holding down the Ctrl key (the current thought of these two cases), So how to get the height of the scroll bar and determine if the Ctrl button is released to reset the global variable down.


Ideas learned:

When you encounter difficulties or don’t understand, don’t try without clue, check the information and learn from experience (ask more), but don’t copy, you should first understand the author’s ideas, and then use this idea for your own project to modify, to meet the needs of your own project code!


I have a question to ask you:

  1. I used the BOM method of native JavaScript to get element nodes, and used it in the listener event of jQuery. Does this operation have any negative effects?
  2. I used four if statements in these 23 lines of code to see if too many of them had a negative impact


From a little inferiority code farming article, hope to benefit people and self-interest!