夏日博客

A-A+

jQuery实现文本域中按回车加换行

2016年01月07日 前端设计 暂无评论 阅读 8 views 次

我们测试过在文本框中如果我们不进行一些设置在文本框中是无法进行排版的哦，如果我们有回车，但是提交之后就没有了，这样需要进行一些简单的处理哦，下面来看一个基于前端js做法。

例子代码如下:

  1. <script type="text/javascript">  
  2.  jQuery(function ()  
  3. {  
  4. jQuery('.content textarea').keyup(function (e){  
  5. if(e.keyCode == 13){  
  6. var curr = getCaret(this);  
  7. var val = jQuery(this).val();  
  8. var end = val.length;  
  9. jQuery(this).val( val.substr(0, curr) + '<br/>' + val.substr(curr, end));  
  10. }  
  11. })  
  12. });  
  13. function getCaret(el) {  
  14. if (el.selectionStart) {  
  15. return el.selectionStart;  
  16. }  
  17. else if (document.selection) {  
  18. el.focus();  
  19. var r = document.selection.createRange();  
  20. if (r == null) {  
  21. return 0;  
  22. }  
  23. var re = el.createTextRange(),  
  24. rc = re.duplicate();  
  25. re.moveToBookmark(r.getBookmark());  
  26. rc.setEndPoint('EndToStart', re);  
  27. return rc.text.length;  
  28. }    
  29. return 0;  
  30. }  
  31. </script>  
  32. html  
  33. <div class="content">  
  34. <textarea>在光标位置按回车加br标签</textarea>  
  35. </div>  

补充:现文本框回车键转tab键,代码如下:

  1. <script type="text/javascript">  
  2. //功能：将回车键转tab键  
  3. jQuery(function () {  
  4. jQuery('input:text:first').focus();  
  5. var $inp = jQuery('input:text');  
  6. $inp.bind('keydown', function (e) {  
  7. var key = e.which;  
  8. if (key == 13) {  
  9. e.preventDefault();  
  10. var nxtIdx = $inp.index(this) + 1;  
  11. jQuery(":input:text:eq(" + nxtIdx + ")").focus();  
  12. }  
  13. });  
  14. });  
  15. </script>  
标签：

给我留言