迷途知返 » JavaScript

js控制表单提交经典一例

pwwang — Wed, 06 Apr 2011 14:11:43 +0000

扯句闲话，不知道为什么，偶没写什么反动言论啊，IP被墙，换IP后国内才能访问。。。搞得上篇都整E文，心想反正国人看不到了。。。现在终于可以用上母语了。。。

言归正传。

前两天和同事调程序，遇上js控制表单提交经典案例。

事情是这样的，他用js控制表单提交，结果发现无论如何也无论提交数据。但是点submit按钮却可以。

他的表单大致如此：

 action="www.google.com">
 type="text" name="property" />
 name="submit" value="submit" type=submit />
 type="button" value="sub" onclick="javascript:this.form.submit()" />
>

表现就是点submit可以提交，点sub无法提交。。。

于是怀疑form的submit函数有问题，尝试打印出form的所有属性，发现submit的值是字符串submit，

而不是一个function，看到submit的name后，恍然大悟，

button的name值设为submit后，它成为了form的一个属性，从而覆盖了form原有的submit函数。。

修正方法也很简单，将submit的name改为其他值就可以了。

变量名有意识的避开潜在关键字，还是一个挺好的习惯。

正是因为我之前在写表单的时候都避开了类似的关键字（从未出过类似问题），

所以看到他的表单的submit的时候只是觉得有点不妥，却没有警觉起来。

A more elegant way to write OO-JavaScript

pwwang — Thu, 13 Jan 2011 14:01:35 +0000

JavaScript IS an OO language itself.

I just wrote a jQuery plugin to realize a C-like class writing style.

I’ve used just one of the jQuery functions, $.extend. So if you’d like to make it standalone, just realize $.extend yourself then you make it.

Now see the code, I’ve made comments in it.

/**
 * @Author: pwwang(pwwang@pwwang.com)
 * @Function: make a more elegant way to write OO-JavaScript
 * @Note: presevered member name: 
 *   _init -> constructor, 
 *   _super -> super class which this class inherited.
 **/
 
(function($){
 
    $.Class = function(opts, ext){
        //deepcopy, opts won't change
        var temp_opts = {};
        $.extend( temp_opts, opts ); 
 
        // temporarily store the super class
        var _super = {}; 
 
        if( ext && $.isFunction(ext) ){
            // deepcopy ext.prototype that it won't change
            var ext_prttype = {};
            $.extend( ext_prttype, ext.prototype );
            // class extension
            $.extend( ext_prttype, temp_opts);
            // give it back to temp_opts
            $.extend( temp_opts, ext_prttype );
            // get ext.prototype store in _super
            $.extend( _super, ext.prototype );
            // initialize this.super
            temp_opts._super = {};
        }
 
        var CLASS = function(){
            var t = this;
            // class initialization
            CLASS.prototype._init.apply(t, arguments);
            // realize this.super, try to apply THIS to the functions.
            for( var k in _super ){
                temp_opts._super[k] = $.isFunction(_super[k]) 
                ? (function(fn){
                    return function(){
                        fn.apply(t, arguments);
                    }
                })(_super[k]) : _super[k];
            }
        };
 
        // set other variables or functions
        $.extend(CLASS.prototype, temp_opts);
 
        // use static impl to set
        CLASS.impl = function(im){
            $.extend(CLASS.prototype, im);
        };
 
        return CLASS;
    };
 
})(jQuery);

Here are some samples to show how to use it.

简单写了个jquery的鼠标提示文字插件

pwwang — Fri, 27 Aug 2010 01:51:07 +0000

效果图:

调用:

>
>
 src="js/jquery.js">>
 src="js/jquery.tip.js">>
>
$(function(){
    $('div').tip('This is a multipul style tip. I\'m  style="font-weight:bold">bold>. />Line break. I\'m  style="color:red">red>. Images are also availale.  />  src="http://pwwang.com/logo.gif" >');
});
>
>
>
 style="float:left; width:300px; height:300px; background:#f90;">handler>
>
>

源码:

(function($) {
 
    $.tip = function(src, content, cls) {
 
        var $tdiv = $('');
        $tdiv.css({
            'position':'absolute',
            'display':'none',
            'z-index':'9999'
        }).html(content).appendTo('body');
 
        if( cls ){
            $tdiv.addClass(cls);
        } else {
            $tdiv.css({
                'border' : '1px solid #969696',
                'background' : '#ffe',
                'font-size' : '12px',
                'padding' : '2px'
            });
        }
 
        var move = function(e){
            $tdiv.css({
                'top' : (e.pageY+23) + 'px',
                'left' : (e.pageX) + 'px'
            });
        };
 
        $(src).mouseenter(function(e){
            $tdiv.show();
            $(document).bind('mousemove', move);
        });
 
        $(src).mouseleave(function(){
            $tdiv.hide();
            $(document).unbind('mousemove', move);
        });
 
    }
 
    // content: what is the tip
    // cls: the style class of the tip div
    $.fn.tip = function(content, cls) {
 
        this.each(function() {
            new $.tip(this, content, cls);
        });
        return this;    
    };
})(jQuery);

谈HTML表单元素的一种写法

pwwang — Thu, 26 Aug 2010 07:38:43 +0000

默认的表单(form)是有margin的, 所以插入的时候, 可能会使布局变形.

有时候表单内的元素较多, 需要排版, 较为方便的还是table.

为了消除表单给页面布局带来的影响, 我常常喜欢这样插入表单:

>
     method="post" action="?" name="form1" id="form1">
 
        >> type="submit" value="submit" />>>
 
    >
>

这样就没有表单带来的布局影响了.

然而, 当我用js来操作时, IE下影响不大, 但在FF下就出现问题了:

alert($('#form1').html());
//用纯js操作效果是一样的

IE下正常,可以得到表单的innerHTML, 但FF下却为空.

如果我用js在表单中插入一个元素, 但来alert,发现只有插入的那个元素的html:

$('#form1').append('');
alert($('#form1').html());
//FF中结果是
//ie中可以得到原有元素加上插入的元素的html

查看源代码发现, 原来FF把form的结束tag解释在了开始tag之后:

>
             action="?" method="post" name="form1" id="form1">>
        >>> name="textfield" type="text">>>
        >
>

故而form的innerHTML为空.

正确的写法应该是这样的:

> /*可在css文件中定义*/
form{margin:0; padding0;}
>
 
 method="post" action="?" name="form1" id="form1">
    >
        >> type="submit" value="submit" />>>
    >
>

Mine-Sweeping(扫雷) in jQuery/JavaScript

pwwang — Fri, 30 Oct 2009 16:01:09 +0000

Demo: http://pwwang.com/tools/mine-sweeping.html

Google Code Project Home Page: http://code.google.com/p/mine-sweep-in-jquery-javascript/

Introduction

A simulation of windows mine-sweeping(扫雷) in jQuery/JavaScript?

Information

pwwang http://pwwang.com

page http://pwwang.com/technology/js-javascript/mine-sweeping-in-jquery-javascript/

demo http://pwwang.com/tools/mine-sweeping.html

Details

Performs perfectly in Firefox
Works well in IE but not ideally
Basicly realize all the functions of all windows mine-sweeping has
Especially realize an event that the left-button and right-button clicks at the "same" time —- that is, it differs in a very short time,and then the event will fire.

JavaScript中左右键“同时”点击(click,mousedown,mouseup)事件

pwwang — Thu, 29 Oct 2009 01:35:09 +0000

之所以同时加上引号，是因为真正的同时，除了机器人，是不可能做到的。

这个是利用jQuery的事件管理机制来实现的，并把它写成了一个jQuery插件。

在Firefox中表现完美，在IE中能够实现想要的功能，但是总是有些不尽如人意。

在IE中左键的button值是1,右键是0；而在Firefox中左键是0,右键是2.

问题倒不在这里，问题在于，如果你在IE中先点右键，再很短的时间内再点左键，你会发现得到的button值是3！并且如果是这么简单也就好了，直接检测button值，如果是3,就直接执行事件就行了。可是问题总不是想象中的那样简单，在button＝3的事件执行完之后，IE还会激发一个button=1的事件（先点的右键，那点的左键）。这在处理起来就麻烦多了。

我的思路和网上想实现这类功能的人的思路大致相同，也是通过一个计时器来判断。

具体思路是这样的：

这个插件可以处理鼠标左右键的同时点击（click），鼠标按下（mousedown），鼠标弹起（mouseup）事件。在讲思路的时候就以点击为

例。

首先我们必须先找出所有绑定为点击的事件，unbind它们，因为要阻止它们在一点击鼠标的时候就执行。

在找这些事件的时候还是颇费了一番功夫的。因为jQuery的源码还没有真正的读通。所以机制也并没有弄很清楚明白。jQuery将事件存在了一个缓存里面（jQuery.cache），但是如果从这个缓存里把这些事件取出来？关键问题是找到元素对应的在缓存的位置，我找遍了jQuery(…)就是没有这样的公有方法。于是用了一个小trick，我们知道jQuery允许我们给一个元素绑定data，而这个data也是存在缓存里的。所以我就可以赋一个唯一的属性值给data（时间戳或者随机数），再后再通过这个唯一值找到这个元素并找到存储的事件。

这时候我们就可以处理左右键的事件了。因为无论左键还是右键先点，我们要达到的效果是一样的，所以这里只说一下其中一个键点击的事件。

当点击一个键的时候，我们先需要先判断另一个键是否已经点击，如果还没有点击，这时候判断一下时间差（这个是专为IE设计的。。。因为IE会引起一个button=1的事件，在button＝3的事件执行之后，就把时间变量设置为当前时间），如果不在时间差内，就等待另一个按键的点击。如果另一个键已经点击了的话，那就直接判断时间差，在时间差内就执行给定的事件；如果不在，就执行原有的事件。

这样，在bindLR后，也不影响原来已经bind的事件的执行（会有设定时间的延时，为了等待另一个键的点击），在unbindLR之后，也能够恢复原来已经bind的事件，我没有采用循环绑定，所以在绑定了bindLR事件之后，无法再用unbind来原有事件的绑定，并且，unbindLR现在的功能有限，只能解除所有的bindLR事件，并不能解除指定事件的绑定。

jquery.LRmouse.js

/**
 *
 * jquery.LRmouse 1.0.0
 * 
 * Author: pwwang ( http://pwwang.com )
 * 2009.10.26
 *
 * Bind an event handle to a listener that 
 * LButton and RButton of the mouse act
 * ( click, mousedown, mouseup ) "simultaneously"
 *
 * It works on both IE and Firefox, distinguishedly,
 * however, it performs perfectly in Firefox; not
 * exactly ideally in IE.
 *
 **/
(function($){
 
    $.bindLR = function( elem, type, data, fn, intv ){
 
        var L_BUTTON = $.browser.msie ? 1 : 0 ;
        var R_BUTTON = $.browser.msie ? 0 : 2 ;    
        var LR_BUTTON = 3; // ie
 
        var orgType = type.substr(2);
 
        var L_flag = false;
        var R_flag = false;                
 
        var getTime = function(){
            return +new Date;
        };        
 
        var lrId = getTime();
        // for finding the elem in $.cache
        // a trick, 'cz I don't know how to
        // find the function directly
        elem.data('lrId', lrId);  
        var orgFns = [];
        for( var i in $.cache ){  
        // find original binded functions
            if( $.cache[i]['lrId'] == lrId ){
                var fns = $.cache[i]['events'][orgType];
 
                for( var j in fns ){
                    orgFns.push( fns[j] );
                    elem.unbind( orgType, fns[j] );
                }
                //remove it
                elem.removeData('lrId');
                break;
            }
        }
        elem.data('lrTempEvents',orgFns); 
 
        var timer = getTime();
        var timeOut;
 
        var reset = function(){
            L_flag = false;
            R_flag = false;
            clearTimeout( timeOut );
        };        
 
        var orgFnHandle = function(e, data){
            reset();
            for( var i=0; i<orgFns.length; i++ ){
                orgFns[i].call(elem, e, data);
            }
        };
 
        var L_event = function(e, data){
            if( !R_flag ){ //waiting
                // if LR_BUTTON, do NOT wait
                // LR_BUTTON in ie will call L_BUTTON event
                if( getTime() - timer > intv ){  
                    L_flag = true;
                    timer = getTime();
                    timeOut = setTimeout( 
                        function(){orgFnHandle(e, data);}, 
                        intv+1
                    );
                }
            } else {
                reset();
                var deltT = getTime() - timer;
                if( deltT <= intv ){
                    fn.call(elem, e, data);
                } else {
                    orgFnHandle(e, data);
                }
            }
        };
 
        var R_event = function(e, data){
            if( !L_flag ){
                if( getTime() - timer > intv ){
                    R_flag = true;
                    timer = getTime();
                    timeOut = setTimeout( 
                        function(){orgFnHandle(e, data);}, 
                        intv+1
                    );
                }
            } else{
                reset();
                var deltT = getTime()-timer;
                if( deltT <= intv ){
                    fn.call(elem, e, data)
                } else {
                    orgFnHandle(e, data);
                }
            }
        }
        var eventHandle = function(e, data){
            if( L_BUTTON === e.button )
                L_event (e, data);
            else if( R_BUTTON === e.button )
                R_event (e, data);
            else if( LR_BUTTON === e.button ) { //ie
                timer = getTime();
                fn.call(elem, e, data);
            }
        };    
 
        //ban context menu;
        elem.bind('contextmenu', function(){ return false; });  
        //bind new
        elem.bind( orgType, data, eventHandle );
 
    };
 
    $.unbindLR = function(elem, type){
        elem.unbind('contextmenu');
        elem.unbind( type );
        var orgType = type.substr(2);
        elem.unbind( orgType );    
 
        var lrId = Math.random();
 
        elem.data('lrId', lrId);  
 
        for( var i in $.cache ){  
            if( $.cache[i]['lrId'] == lrId ){
                var fns = $.cache[i]['lrTempEvents'];
                for( var j in fns ){
                    elem.bind( orgType, function(){ fns[j].apply(elem,arguments) });
                }
                //remove it
                elem.removeData('lrId');
                elem.removeData('lrTempEvents');
                break;
            }
        }
    };
 
    $.fn.bindLR = function(type, data, fn, intv){
        if( $.isFunction( data ) ){
            intv = fn || 500;
            fn = data;
            data = {};
        } else {
            data = data || {};
            fn = fn || {};
            intv = intv || 500;
        }
        // lr bind for $(...).trigger()
        this.bind(type,data,fn);   
 
        if( type.substr(0,2)=='lr' ){
            $.bindLR( this, type, data, fn, intv );
        }
        return this;
    };
 
    $.fn.unbindLR = function(type){
        $.unbindLR( this,type );
        return this;
    }
})(jQuery);

JavaScript中的print_r

pwwang — Mon, 26 Oct 2009 16:59:03 +0000

做JavaScript开发, 特别是稍微复杂一点的程序, 难免要用到JavaScript面对对象的特性, 现在JavaScript的调试工具逐渐多和强大起来, 然而有时候要看一个object的值, 还是很不方便, 这时候就开始想念php的print_r功能了, 它可以将数组和对象的皮剥得干干净净, 让你看得一清二楚.

网上已经有很多版本了,但都不太好用,没有达到想要的效果,我自己写了一个, 稍微看得清楚一点.

先看一下效果图:

图中我只截取了一个元素,下面还有几个元素没有截取, 从这张图中可以看出来这个object的结构是:

[
   { events: {
    unload: [ function(){...} ],
load: [ function(){...} ]
   } },
{ … }
]

功能特色:

1. 同一父级下的子元素,不同的层级显示不同的字体颜色

2. 同一层级的开始和结束的地方用 | 连接, 极好辩认

3. 显示数据类型

4. 如果类型是函数的话, 格式保持不变( IE和firefox下表现不同, 但能保持格式 )

源代码:

function print_r(o){
    function print(o,i){
        i = i || 0;  // how many tabs
        var color = '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).substr(-6); 
        // randomly generate a color
        var indent = '|    '
        // form of a tab, you can use '|\t' instead
 
        var space = '';
        for( var k=0; k<i; k++ ){
            space += indent;
        }
        var ret = '';
        for( var name in o ){
            var val = o[name];   
            ret += space + '+ color + '">' + name + " => "+ typeof(val) +'( ';
            if( typeof val == 'object' ){
                ret += '\n'+print(val,i+1);
                ret += space;
            } else if( typeof val == 'function' ){
                ret += '\n' + space + indent + val.toString().replace(/\n/g, '\n'+space+indent) + '\n'+space;
            } else
                ret += val + ' ' ;
            ret += '+ color + '">' + ')\n';
        }
        return ret;
    }
    if( typeof o == 'object' )
        return ''+print(o)+'
';  //use pre to prevent structure destruction
    else
        return o;
}

Tetris(俄罗斯方块) in jQuery/JavaScript!

pwwang — Sat, 24 Oct 2009 18:09:48 +0000

All in jQuery/JavaScript + HTML!

Demo：Tetris(俄罗斯方块) in jQuery/JavaScript!

文章最后会给出源码下载。

先上两张图：

其实很早就有这样的想法，无奈思想一直不是很成熟，各个细节没有想好。突然某一天灵光闪现，就想到办法了。相信应该也有很多人有过这样的想法，可是总是会被一些细节问题所卡住。只要思路有了，代码的实现上并不难。所以我重点说一下思路。

先说一下这样程序的功能吧。图里面能够看得很清楚了。基本的功能就不说了，其它的包括下一个下落形状的预览（左上角的小方块中），隐藏、显示网格线，隐藏、显示下落时对好的阴影形状。其它的就是俄罗斯方块的基本功能了。

很重要的一点，很多人可能受到了思维定势的影响，觉得既然是俄罗斯方块，那当然是一个个方块往下落。如果你这样想，我敢说这样就算程序的功能都可以完成，也绝对在1000行以上（我的程序不超过1000行，包括各个函数的注释），甚至要远远超过这个数。如果跳出了这个方块下落和思维定势，那问题就好解决了。

有人可能要问了，既然方块不动，那是什么在动呢？有人说颜色，但更确切地说是样式！每一次，让下一个方格的样式用上一个方块来替代，这样下落就成了对样式的操作了！虽然下落是位置在变，位置（top,left）也是样式，但是这可能要涉及到HTML，或者DOM元素的操作了。相比而言，前一种思路不用动任何的HTML元素！这是简化的最关键所在了。

再说一下其它方面。

方块的排列：

用一个float:left就能排列好了，需要注意的是，在设置容器的长宽时，要注意小方块的方框宽度，这个也要计算在内。

按键的处理：

我们知道，像DIV，SPAN（容器用的DIV，方块用的SPAN）无法直接响应按键按下的事件（onkeydown），那我们只好先用可以响应的元素来接收这个事件，我用的是document，由于我把它写在了类的内部，所以，要把事件内容的this变成实际要处理的元素（Tetris），就需要用到javascript的call函数了。

形状在移动（左、右、下、旋转）的时候出界或者是否压住了其他方块的判断：

有两种方式，第一种是先计算好方块可以移动的最小距离，然后再判断方块是否移动超过了这个最小距离。（注意我这里说的移动都是对样式的操作）。这种方式比较麻烦，因为首先要得到方块的最左，最右和最下的方块，然后再通过这些方块来计算这个最小距离，并且旋转就无法用距离来衡量了。但是如果要得到阴影（后面解释阴影的实现）的话，还是得计算这个最小距离。我的做法是移动一步（包括旋转）采取第二种方法，而直接下落和生成阴影而采用第一种方法。

第二种方式是先将坐标值预存起来，然后假设方块移动了，再判断这个方块是否在界内，并没在压住其它的方块。如果不符合条件，再将坐标值还原回去。这里插一句，如果预存坐标？我的坐标采用的是数组的形式储存的，不能直接用＝来赋值，这个只能将变量指向右值而成为右值的引用。要复制数组或对象，必须采用循环或者遍历对象属性，且元素或属性的值为基本类型时才能赋值。

下一个形状预览的问题：

想清楚了最关键的问题，这个问题很好解决，这个就是大容器的缩小版，当前显示形状的时候同时计算下一个形状的序列号，并存储。下次显示形状的时候调用这个序列号就行了。

最后说一下旋转的问题：

其实这是一个数学问题。

由于旋转前后，向量的长度（设为R）不变，所以：

cosA = x0/R, sinA = y0/R …… （2）

对于右图：

x1 = R * cos（A+B）＝R（cosAcosB – sinAsinB）

y1 = R|* sin（A+B）＝R（sinAcosB + cosAsinB）

将（2）代入得到：

x1 = x0 * cosB – y0 * sinB

y1 = x0 * sinB + y0 * cosB

由于我设定的是逆时针旋转，所以再将B＝-B代入上式：

x1 = x0 * cosB + y0 * sinB

y1 = -x0 * sinB + y0 * cosB

再者，我们旋转的角度为90度，再代入，得到：

x1=y0, y1=-x0 …………. （3）

这是以原点为出发的向量，如果不是原点为出发点，假设这个点（旋转中心）为（cx，cy），将向量进行平移：

x1-cx = y0-cy, y1-cy = cx-x0，于是（3）变成：

x1 = cx-cy+y0, y1 = cx+cy-x0 （4）

这里值得提一下的是，尽管我们的坐标系和正规的xy平面坐标系不同，我们的原点在左上角，x（二维数组第一下标）轴垂直向下，y（二维数组第二下标）轴水平向右，但是由于我们旋转的时候选取的是向量，它的方向是确定的，不随坐标系的变化而变化，所以（4）仍然适用于我们的坐标系。

有了公式（4）,选取适当的旋转中心（x0,y0）就可以进行转换了。为了效率，我们可以把由四个小方块组成的大方块排除在外，不用旋转。

源代码下载

Home Page in Google Code: http://code.google.com/p/tetris-in-jquery-javascript/

Introduction

jQuery.msgbox game called tetris(俄罗斯方块) in jQuery/JavaScript?

Information

pwwang http://pwwang.com

page http://pwwang.com/technology/js-javascript/tetris-in- jquery-javascript/

demo http://pwwang.com/tools/tetris.html

Details

It’s a classic tetris
It has basic functions of tetris
You could decide to show the grids or not
You could choose to show the shadow( will the falling shape will locate ) or not
Pause or resume game

jquery.msgbox is now hosting in Google Code

pwwang — Thu, 22 Oct 2009 13:02:22 +0000

Introduction

jQuery.msgbox Popups a msgbox on the web pages using jquery JavaScript Library

Information

pwwang http://pwwang.com

plugin page http://pwwang.com/technology/js-javascript/jquery%e6%8f%92%e4%bb%b6%ef%bc%9adiv%e6%8f%90%e7%a4%ba%e6%a1%86jquery-msgbox-2-0/

Details

It can:

simulate window.alert, and the title of the box will flash if you try to click other part of the page
simulate window.confirm
allow you to popup a plain text box
allow you to popup a iframe in the box
allow you to popup a box with Ajax method
be closed automatically as you wish
mask the back contents of page when box showed
do an event you designated when the box closes
be dragged to anywhere in the window as you wish
decided whether popup another box if the page is in the iframe of a box

Project Home Page: http://code.google.com/p/jquery-msgbox/

DIV提示框：jquery.msgbox.3.1

pwwang — Mon, 12 Oct 2009 14:24:25 +0000

jquery.msgbox 3.1 历史版本： 1.0 2.0 3.0

3.1 更新：

1. 修正IE8以下“无法得到 display 属性。参数无效”的bug

2. 关闭提示框后移动提示框的HTML代码

下载：

jquery.msgbox.js

jquery.msgbox.css

close.gif