js 一些小技巧 3

JavaScript的一些小技巧

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


在多行文本域增加onkeydown 事件

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

Prettyprint代码  

  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)实现渐变地回到顶部


“回到标题”的html代码如下:

Html代码  

  1. <a style="float: right;" class="aHref" onclick="anchorGoWhere('title_loc_bbs')">回到标题</a>  

 

anchorGoWhere是js方法,实现如下:

Js代码  

  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代码  

  1. $navHrefComment.get(0).onclick = function () {  
  2.         bbs.addBBSComment(cardid2);  
  3.     };  

 

 

(4)textarea字符长度限制

 

Js代码  

  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代码  

  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)使遮罩层的背景图片不随滚动条移动

之前显示遮罩层时,背景图片总是随滚动条的移动而改变,如下图:

 

 这样就存在一个问题,就是内容太长时,有滚动条,而我设置的背景图片的位置在垂直和水平居中,就导致有时候,显示遮罩层,但是看不到背景图片(转圈的图片,提示等待),导致用户体验不好.

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

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

使用background-attachment:fixed;属性

 

(7)jquery 获取javascript脚本内容

$('#scriptContent').text()

Js代码  

  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" onclick="jsonp2()"/>&nbsp;  
  27. <input type="button" value="获取脚本内容" onclick="getScriptContent()"/>  
  28.   
  29. <div>  
  30.     <div id="resultDiv"></div>  
  31. </div>  
  32. </body>  
  33. </html>  

 

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

Js代码  

  1. var script = document.createElement('script');  
  2.        script.type = 'text/script';  
  3.        script.text = 'alert(123)';  
时间： 2024-08-24 00:18:02

js 一些小技巧 3的相关文章

web开发常用js功能性小技巧

js|web|技巧 web开发常用js功能性小技巧 -------------------------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">; <HTML>; <HEAD>; <TITLE>; New Document </TITLE&g

js一些小技巧 3

js一些小技巧 1. (1)同时按Ctrl+Enter提交本表单 在多行文本域增加onkeydown 事件 <form id="formNews_reply" class="bbs-send-form form" onsubmit="return news.add_newsReply(this);"> <fieldset class="inputs"> <label for="comme

js 一些小技巧 2

ajs 的一些小技巧 (1)传入一个表单控件(如input输入框,按钮)获取所在的form   Js代码   var getForm= function (formElement) {              var $that=$(formElement).parent();              var max=6;//limit the depth              var fieldsetElement=null;//form element              va

js 一些小技巧

1,表单中,回车导致下一个表单元素聚焦 Js代码 /*** enter to make next object focus */ var pressFocusNext=function(event,next22){ if(!event ||event==undefined){ event=window.event; } if(event.keyCode==13){//Enter if(typeof next22 == 'string'){ next22=com.whuang.hsj.$$one(

.net下不用AJAX实现前台JS调用后台C#方法(小技巧)

纯属小技巧,高手见笑了. 一提到如何在前台JS调用后台C#方法,AJAX成为了必然的想法. 只是实现的细节采用AJAX 1.0或者AjaxPro的区别. 其实如果不用AJAX,我们也能够很方便地利用JS调用后台方法. 步骤如下: 1 前台放一个按钮.设置为隐藏.注意:不能直接设置Visible=false的方式,这样的话在ASP.Net 2.0编译后的代码里是找不到这个按钮的.需要设置风格:style="display:none;" 2 双击按钮,写入C#方法,或者写一个调用后台其他方

CSS 黑魔法小技巧，让你少写不必要的JS，代码更优雅

之前不久,由于自己平时涉猎还算广泛,总结了一篇博客: 这些JavaScript编程黑科技,装逼指南,高逼格代码,让你惊叹不已 ,没想到受到了大家的欢迎,有人希望能博主还能整理个 CSS的一些黑魔法小技巧,无奈我 CSS 一直很渣,没什么干货,最近写了一个 Chrome 插件 GayHub,算是把 GitHub 的样式审查了个变,在写的过程中,也收获了很多关于 CSS 的小技巧,尤其是开始的第一个技巧,学习到了很多,于是再加上一波搜集,就诞生这篇博文,欢迎补充~~~:joy:. 1.利用 CSS 

js、jquery实用小技巧集合

Tip16:JS的定时器 JS 中有两种定时器,setTimeout('fn', t) 和 setInterval('fn', t),'fn'指的是定时执行的方法名,字符串类型.       setTimeout('fn', t):   只执行一次,执行完成后将销毁.   setInterval('fn', t):一直执行.   (Date:2012-02-17)   ----------------------------------------------------------------

客户端js性能优化小技巧整理_javascript技巧

下面是一些关于客户端JS性能的一些优化的小技巧: 1. 关于JS的循环,循环是一种常用的流程控制.JS提供了三种循环:for(;;).while().for(in).在这三种循环中 for(in)的效率最差,因为它需要查询Hash键,因此应尽量少用for(in)循环,for(;;).while()循环的性能基本持平.当然,推荐使用for循环,如果循环变量递增或递减,不要单独对循环变量赋值,而应该使用嵌套的++或--运算符. 2. 如果需要遍历数组,应该先缓存数组长度var len=arr.len

js实现小窗口拖拽效果_javascript技巧

本文实例为大家分享了js实现窗口拖拽的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box { height: 300px; width: 300px; background-color: green; po