textarea标签按下Ctrl+Enter实现换行

4,321 阅读2分钟

这是我第一次写文章(处女作),写得不好的地方别客气直接指出来。谢谢!!!


背景交代:

 因项目要求要实现按下Ctrl+Enter换行。


 看起来要求挺简单的,就是两个按钮按下实现换行。但是我第一次接触,我的第一想法是到百度搜索看有没有代码(菜得抠jio),还真找到了一点代码。

灵感来源:

 blog.csdn.net/qwh66/artic…,从吸取了经验(拷代码)

代码:

 吸取的代码:

<script type="text/javascript">
var down=0;   //设置全局变量down,用来记录ctrl是否被按下;
function enter() 
{ 
  if(event.keyCode==17) 
  { 
    down=1;      //ctrl按下
  } 
  if(event.keyCode==13)
  {
    if(down==1)
    {
      document.getElementById("contend").value+= '\n';
      down=0;     //换行后记得将全局变量置为1,否则enter将变成换行,失去发送功能
    }else
    {  
      document.getElementById("btn").click();     //执行按钮发送的功能
      document.getElementById("contend").value="";
    }
  }
}
</script>

 自己的代码:

var down = 0; // 设置全局变量down,用来记录ctrl是否被按下;
var messageText = document.getElementById('messageText');// 获取文本框节点
$(document).off('keydown','#messageText').on('keydown','#messageText',function(fn){// 键盘按下事件
  if(fn.keyCode == 17){// 按下了Ctrl
    down = 1;
  }
  if(fn.keyCode == 13){// 按下了Enter
    if(down ==1){// 判断是否按下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){// 松开了了Ctrl
	   down = 0;// 重置全局变量down,Ctrl松开了
	}
        fn.stopPropagation();// 阻止冒泡
      });
    }else{  
      window.event.returnValue = false;// 暂时屏蔽回车
    }
  }
  fn.stopPropagation();// 阻止冒泡
});


对代码的理解:

如果按照第一份代码是能完成换行的,但是个人比较挑剔,不满足于单单的一个换行。

第二份代码(也就是自己的代码),要考虑到用户存在换多行的情况,如果换了多行有涉及到了高度始终不会改变的情况,还有就是一直按住了Ctrl键情况(目前就想到这两种情况),所以多了要怎么去获取滚动条的高度以及判断松开了Ctrl按钮重置了全局变量down。


学习到的思路:

遇到困难或者不懂的地方不要没有头绪的尝试,查查资料借鉴经验(多问),但也别照搬应该先理解作者的思路,再把这个思路用到自己的项目进行修改,改成满足自己项目需求的代码!


在下有问题请教大家:

  1. 我用到了原生JavaScript的BOM方法获取元素节点,又在jQuery的监听事件里使用,这样的操作有没有什么负面影响。
  2. 在这23行代码里(算有是有23行吧)用到了4次if判断语句,判断太多会不会也有负面影响


来自有点自卑的码农的文章,希望能利人又利己!