您的位置: 首页  >  文章  >  js 一些小技巧 3

js 一些小技巧 3

分类: 文章 • 2024-06-22 12:36:28

JavaScript的一些小技巧

(1)同时按Ctrl+Enter提交本表单

js 一些小技巧 3
在多行文本域增加onkeydown 事件

com.whuang.hsj.ctrlEnter2Submit的实现如下:

Prettyprint代码  js 一些小技巧 3
  1. <code style="display: block; padding: 0px; color: inherit; font-family: 'Source Code Pro', monospace; font-size: inherit; border-radius: 0px; background: transparent;" class="hljs scala has-numbering">/***  
  2.  *  
  3.  1. @param event : textarea onkeydown event  
  4.  2. @param formElement : textarea itself  
  5.  */  
  6. com.whuang.hsj.ctrlEnter2Submit= function (event,formElement) {  
  7.     if(event.keyCode == 13 && event.ctrlKey) {  
  8.         var $thisForm=com.whuang.hsj.getForm(formElement);  
  9.         var submitBtn=$thisForm.find(":button:first");  
  10.         submitBtn.get(0).click();  
  11.     }  
  12. };</code>  

js方法执行流程:先通过com.whuang.hsj.getForm 方法获取textarea所在的表单,然后获取表单下的第一个按钮,最后触发按钮的onclick事件. 
注意:”:button:first” 表示第一个按钮,同理”:input:first”表示第一个表单控件(输入框,按钮,复选框等) 

(2)实现渐变地回到顶部


js 一些小技巧 3
“回到标题”的html代码如下:

Html代码  js 一些小技巧 3
  1. <a style="float: right;" class="aHref" onclick="anchorGoWhere('title_loc_bbs')">回到标题</a>  

 

anchorGoWhere是js方法,实现如下:

Js代码  js 一些小技巧 3
  1. var anchorGoWhere = function (anchorName) {  
  2. $("#subPageBBS .subContent").animate({scrollTop: $("a[name=" + anchorName + "]").offset().top}, 1000);  
  3. };  

 

 

说明:$(“#subPageBBS .subContent”) 是滚动条所在的div 

(3)从jQuery对象获取原生的dom元素

jquery对象.get(0) .例如

Js代码  js 一些小技巧 3
  1. $navHrefComment.get(0).onclick = function () {  
  2.         bbs.addBBSComment(cardid2);  
  3.     };  

 

 

(4)textarea字符长度限制

 

Js代码  js 一些小技巧 3
  1. /* 
  2.  1. textarea字符长度限制 
  3.   
  4.  */  
  5. isMaxLen = function(event) {  
  6.     var obj = event.srcElement?event.srcElement:event.target;  
  7.     var target = $("#"+obj.getAttribute("id").replace(".","\\."));  
  8.     var maxLength = target.attr("maxlength");  
  9.     if (target.val().length > maxLength) {  
  10.         target.blur();  
  11.         target.val(target.val().substring(0, maxLength));  
  12.         target.focus();  
  13.     }  
  14. };  

 

 

(5)回车+CTRL实现换行

 

Js代码  js 一些小技巧 3
  1. /* 
  2.  * 回车+CTRL换行 
  3.  *  
  4.  */  
  5. newline = function(event) {  
  6.      if(event.keyCode == 13 && event.ctrlKey){  
  7.          if (document.selection) {  
  8.              var selectText = document.selection.createRange();  
  9.              if(selectText){  
  10.                  if(selectText.text.length > 0)  
  11.                      selectText.text += "\r\n";  
  12.                  else  
  13.                      selectText.text = "\r\n";  
  14.                  selectText.select();  
  15.                  }  
  16.          }  
  17.          else{  
  18.              var obj = event.srcElement?event.srcElement:event.target;  
  19.              obj.value += "\r\n";  
  20.              }  
  21.          }  
  22.      };  

 

 

(6)使遮罩层的背景图片不随滚动条移动

之前显示遮罩层时,背景图片总是随滚动条的移动而改变,如下图:
js 一些小技巧 3
 
js 一些小技巧 3
 这样就存在一个问题,就是内容太长时,有滚动条,而我设置的背景图片的位置在垂直和水平居中,就导致有时候,显示遮罩层,但是看不到背景图片(转圈的图片,提示等待),导致用户体验不好.

那么如何让背景图片始终在可视区域的居中位置呢?

终于找到方法了(参考http://www.cnblogs.com/wangmuxing/p/4369282.html)

使用background-attachment:fixed;属性

 

(7)jquery 获取javascript脚本内容

$('#scriptContent').text()
Js代码  js 一些小技巧 3
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head lang="en">  
  4.     <meta charset="UTF-8">  
  5.     <script type="text/javascript" src="jquery-1.11.1.js" id="scriptContent2"></script>  
  6.     <script type="text/javascript" id="scriptContent">  
  7.         var jsonp2 = function () {  
  8.             $.ajax({  
  9.                 url: "http://localhost/cors/complex?callback=?",   
  10.                 dataType: "jsonp",  
  11.                 success: function (data) {  
  12.                     $('#resultDiv').html(JSON.stringify(data));  
  13.                 }  
  14.             });  
  15.   
  16.         };  
  17.         function mycallback(data) {  
  18.             alert("Here: " + data.name);  
  19.         }  
  20.         var getScriptContent = function (e) {  
  21.             alert($('#scriptContent').text());  
  22.         }  
  23.     </script>  
  24. </head>  
  25. <body>  
  26. <input type="button" value="jquery jsonp" οnclick="jsonp2()"/>&nbsp;  
  27. <input type="button" value="获取脚本内容" οnclick="getScriptContent()"/>  
  28.   
  29. <div>  
  30.     <div id="resultDiv"></div>  
  31. </div>  
  32. </body>  
  33. </html>  

 

(8)动态设置script脚本内容

Js代码  js 一些小技巧 3
  1. var script = document.createElement('script');  
  2.        script.type = 'text/script';  
  3.        script.text = 'alert(123)';  

相关推荐