`
阅读更多

javascript的一些小技巧

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

同时按Ctrl+Enter提交本表单
在多行文本域增加onkeydown 事件

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

/***
 *
 1. @param event : textarea onkeydown event
 2. @param formElement : textarea itself
 */
com.whuang.hsj.ctrlEnter2Submit= function (event,formElement) {
    if(event.keyCode == 13 && event.ctrlKey) {
        var $thisForm=com.whuang.hsj.getForm(formElement);
        var submitBtn=$thisForm.find(":button:first");
        submitBtn.get(0).click();
    }
};

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

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


平滑地回到顶部
“回到标题”的html代码如下:

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

 

anchorGoWhere是js方法,实现如下:

var anchorGoWhere = function (anchorName) {
$("#subPageBBS .subContent").animate({scrollTop: $("a[name=" + anchorName + "]").offset().top}, 1000);
};

 

 

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

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

jquery对象.get(0) .例如

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

 

 

(4)textarea字符长度限制

 

/*
 1. textarea字符长度限制
 
 */
isMaxLen = function(event) {
    var obj = event.srcElement?event.srcElement:event.target;
    var target = $("#"+obj.getAttribute("id").replace(".","\\."));
    var maxLength = target.attr("maxlength");
    if (target.val().length > maxLength) {
        target.blur();
        target.val(target.val().substring(0, maxLength));
        target.focus();
    }
};

 

 

(5)回车+CTRL实现换行

 

/*
 * 回车+CTRL换行
 * 
 */
newline = function(event) {
     if(event.keyCode == 13 && event.ctrlKey){
         if (document.selection) {
             var selectText = document.selection.createRange();
             if(selectText){
                 if(selectText.text.length > 0)
                     selectText.text += "\r\n";
                 else
                     selectText.text = "\r\n";
                 selectText.select();
                 }
         }
         else{
             var obj = event.srcElement?event.srcElement:event.target;
             obj.value += "\r\n";
             }
         }
     };

 

 

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

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

 

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

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

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

使用background-attachment:fixed;属性

 

(7)jquery 获取javascript脚本内容

$('#scriptContent').text()
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script type="text/javascript" src="jquery-1.11.1.js" id="scriptContent2"></script>
    <script type="text/javascript" id="scriptContent">
        var jsonp2 = function () {
            $.ajax({
                url: "http://localhost/cors/complex?callback=?", 
                dataType: "jsonp",
                success: function (data) {
                    $('#resultDiv').html(JSON.stringify(data));
                }
            });

        };
        function mycallback(data) {
            alert("Here: " + data.name);
        }
        var getScriptContent = function (e) {
            alert($('#scriptContent').text());
        }
    </script>
</head>
<body>
<input type="button" value="jquery jsonp" onclick="jsonp2()"/>&nbsp;
<input type="button" value="获取脚本内容" onclick="getScriptContent()"/>

<div>
    <div id="resultDiv"></div>
</div>
</body>
</html>

 

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

 var script = document.createElement('script');
        script.type = 'text/script';
        script.text = 'alert(123)';

 

 

参考: 
js 一些小技巧 
js 一些小技巧 2

http://segmentfault.com/a/1190000002810487

 

 

  • 大小: 207.5 KB
  • 大小: 45.7 KB
0
1
分享到:
评论

相关推荐

    搜集的js实践小技巧

    下面,我们将深入探讨一些实用的JavaScript实践小技巧,这些技巧可以帮助开发者提升代码效率、可读性和维护性。 1. **立即执行函数表达式(IIFE)**:在JavaScript中,IIFE是一种常见的封装技术,避免全局变量污染...

    基于javaScript开发的控制台操作小技巧+非常适合小白入门

    基于javaScript开发的控制台操作小技巧+非常适合小白入门 基于javaScript开发的控制台操作小技巧+非常适合小白入门 基于javaScript开发的控制台操作小技巧+非常适合小白入门 基于javaScript开发的控制台操作小...

    js200多个小技巧

    根据给定的文件信息,以下是对“js200多个小技巧”中提及的部分知识点的详细解析: ### 1. HTML事件与JavaScript交互 - **`onBlur`**:当元素失去焦点时触发的事件。在示例中,用于检测输入框是否为空,并在失去...

    Javascript 实用小技巧

    在本篇标题为“Javascript实用小技巧”的文章中,作者分享了一系列实用的JavaScript代码片段,旨在帮助学习JavaScript的人士掌握一些提高编程效率的技巧。文章内容涉及了JavaScript的Function对象的apply和call方法...

    JavaScript中一些常用的小技巧

    在JavaScript编程中,掌握一些常用的小技巧可以极大地提高开发效率和代码质量。以下是一些从网络上整合的实用技巧,特别适合初学者学习。 1. 事件源对象:`event.srcElement` 可以获取触发事件的元素,而 `event....

    js中的小技巧,十分的实用

    以下是一些关于JS的实用小技巧,对于初学者来说,掌握这些知识点将有助于提升编程效率和理解力。 1. `document.write("")`:这是一个常用的输出语句,常用于在页面加载时动态插入HTML内容。 2. 注释:JS支持单行...

    常用的一些javascript小技巧

    ### 常用的一些JavaScript小技巧详解 在前端开发领域,JavaScript是不可或缺的编程语言,其灵活多变的特性使得开发者能够实现丰富的交互效果。本文将深入探讨一系列实用的JavaScript小技巧,帮助开发者提高编码效率...

    JavaScript小技巧全集

    本资料集合了众多JavaScript的小技巧,旨在帮助开发者提升工作效率,增强代码质量。 1. 变量与数据类型 - JavaScript中的变量可以通过`var`, `let`或`const`声明。理解它们之间的区别(作用域、可变性)是基础中的...

    HTML的一些小技巧

    ### HTML的一些小技巧 在网页开发过程中,合理运用HTML的小技巧可以有效提升用户体验,优化页面布局及功能。本文将详细介绍给定文件中的多个HTML小技巧及其应用场景。 #### 1. 设置背景图片固定不滚动 ```html ...

    js中的小技巧.doc

    以下是一些JS中的实用小技巧: 1. **`document.write`**:这是JavaScript中最基本的输出方法,用于向HTML文档中插入动态内容。例如,`document.write("Hello, World!");`会在页面上显示“Hello, World!”。 2. **...

    200多个js小技巧

    以上这些JavaScript小技巧都是为了增强网页的互动性和用户体验。熟练掌握并灵活运用它们,能让你的网页更加生动有趣。在实际开发中,还可以结合其他前端框架如React、Vue等,将这些技巧与现代Web技术相结合,创建更...

    js使用小技巧

    这些JavaScript小技巧涵盖了从DOM操作、事件处理、字符串处理到样式设计等多个方面,掌握它们能够帮助你在实际开发中编写更高效、更友好的代码。当然,随着技术的发展,某些方法可能已经过时,建议在使用时结合最新...

    javaScript小技巧。

    根据提供的文件内容,我们可以总结出以下几个JavaScript小技巧及相关知识点: ### 1. 引入外部JavaScript文件 在HTML文档中,可以通过`&lt;script&gt;`标签引入外部JavaScript文件来执行脚本代码。例如: ```html ...

    Javascript小技巧之生成html元素.docx

    7. **JavaScript编程的10个有用小技巧**和**12个特别有用的JavaScript小技巧【推举】**:这两篇文章分别分享了10个和12个实用的JavaScript编程技巧,是进阶学习的好资源。 总的来说,掌握生成HTML元素的技巧对...

    【JavaScript源代码】JavaScript的一些小技巧分享.docx

    本文将深入探讨《JavaScript的一些小技巧分享》文档中提及的几个实用技巧,特别是关于数组操作的部分,这些技巧可以帮助开发者更高效地编写JavaScript代码。 #### 数组去重 数组去重是在实际开发中经常遇到的需求...

    Java js小技巧

    本文将深入探讨“Java js小技巧”这一主题,分享一些实用的编程技巧,帮助开发者提升效率和代码质量。 首先,我们来看Java。Java是一种强类型、面向对象的编程语言,被广泛用于企业级应用开发、Android移动应用以及...

    JavaScript小技巧全集 JavaScript教程 JavaScript源代码集

    这个“JavaScript小技巧全集”提供了丰富的教程和源代码,旨在帮助开发者深入理解和掌握JavaScript的各种实用技巧。 首先,我们来看看JavaScript的基本语法。JavaScript是一种弱类型、解释型的语言,它的变量声明不...

Global site tag (gtag.js) - Google Analytics