JavaScript 教程学习笔记(2)—js常用脚本(操作剪贴板,屏蔽字符,选择文本,避免多次提交表单,表单交互)

文章标签: javascript
2014-11-25 17:17:03     14 人阅读    

用到的HTML源码:

<fieldset>

<legend>这是一个表单</legend>

<form action="#" method="post" id="form">

<p><label for="mail">邮箱:</label><input type="text" name="mail" id="mail" /></p>

<p><label for="username">账号:</label><input type="text" name="username" id="username" /></p>

<p>

<label for="password">密码:</label><input type="password" name="password" id="password" />

<a href="#" class="findkey">找回密码</a>

</p>

<p><textarea rows="5" cols="50" name="textarea">填写附加信息</textarea></p>

<p><input type="submit" name="submit" id="submit" value="登陆" /><input type="reset" name="reset" id="reset" value="重置" /></p>

<p>没有账号?<a href="#">快速注册</a></p>

</form>
<
</fieldset>
<
<fieldset>

<legend>模拟Windows XP输入序列号</legend>

<form action="" method="post" id="licence">

<p>

序列号:

<input type="text" name="text1" id="t1" maxlength="6" />

<input type="text" name="text2" id="t2" maxlength="6" />

<input type="text" name="text3" id="t3" maxlength="6" />

<input type="text" name="text4" id="t4" maxlength="6" />

<input type="text" name="text5" id="t5" maxlength="6" />

<input type="text" name="text6" id="t6" maxlength="6" />

</p>

</form>
<
</fieldset>
<
<fieldset>

<legend>这是选择框</legend>

<form action="" method="post" id="selectForm">

<p>

<select name="location" id="selLocation">

<option value="Guangzhou">广州</option>

<option value="Beijing">北京</option>

<option value="Shanghai">上海</option>

<option value="Nanjing">南京</option>

<option value="">香港</option>

<option>台湾</option>

</select>

</p>

</form>
<
</fieldset>
<
<iframe name="richedit" style="width:900px;height:300px;border:1px solid #999;margin:1em;" src="blank.html"></iframe>


js:


 

var EventUtil = {
    addHandler: function(element, type, handler) {
        if(element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if(element.attachEvent) {
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    },
    removeHandler: function(element, type, handler) {
        if(element.removeEventListener) {
            element.removeEventListener(type, handler, false);
        } else if(element.detachEvent) {
            element.detachEvent("on" + type, handler);
        } else {
            element["on" + type] = null;
        }
    },
    getEvent: function(event) {
        return event ? event : window.event;
    },
    getTarget: function(event) {
        return event.target || event.srcElement;
    },
    preventDefault: function(event) {
        if(event.preventDefault) {
            event.preventDefault();
        } else {
            event.defaultValue = false;
        }
    },
    stopPropagation: function(event) {
        if(event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    },
    getCharCode: function(event) {//字符编码
        if(typeof event.charCode == "number") {
            return event.charCode;
        } else {
            return event.keyCode;
        }
    },
    getClipboardText: function(event) {//从剪贴板获得数据
        var clipboardData = (event.clipboardData || window.clipboardData);
        return clipboardData.getData("text");
    },
    setClipboardText: function(event, value) {//设置复制到剪贴板中的数据
        if(event.clipboardData) {//Ch, Sa
            return event.clipboardData.setData("text/plain", value);//数据类型,值
        } else if(window.clipboardData) {//IE
            return window.clipboardData.setData("text", value);
        }
    }
};

//var form = document.getElementById("form");
避免多次提交表单

EventUtil.addHandler(form, "submit", function(event) {
    var event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);//form
    var btn = target.elements["submit"];//取得form中name为"submit"的表单元素
    btn.disabled = true;//禁用它
});

//document.forms[0].elements[0].focus();//监听页面的load事件,并在该事件发生时在表单的第一个字段上调用focus()方法

 

简单的表单交互


 

var form = document.forms[0];
for(var i=0,len=form.elements.length; i<len; i++) {
    if(form.elements[i].type == "text") {
        var textbox = form.elements[i];
        EventUtil.addHandler(textbox, "focus", function(event) {
            event = EventUtil.getEvent(event);
            var target = EventUtil.getTarget(event);
            target.style.backgroundColor = "#6BDEFF";
        });
        EventUtil.addHandler(textbox, "blur", function(event) {
            event = EventUtil.getEvent(event);
            var target = EventUtil.getTarget(event);
            if(/[^\d]/.test(target.value)) {//输入非数值字符
                target.style.backgroundColor = "#F00";
            } else {
                target.style.backgroundColor = "";
            }
        });
        EventUtil.addHandler(textbox, "change", function(event) {
            event = EventUtil.getEvent(event);
            var target = EventUtil.getTarget(event);
            if(/[^\d]/.test(target.value)) {
                target.style.backgroundColor = "#F00";
            } else {
                target.style.backgroundColor = "";
            }
        });
    }
}

 

文本框脚本
选择文本


 

var textarea = document.forms[0].elements["textarea"];//选择name为"textarea"的表单元素
EventUtil.addHandler(textarea, "focus", function(event) {
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    target.select();//选择文本框中所有的文本
});

EventUtil.addHandler(textarea, "select", function() {//select事件
    var target = document.forms[0].elements["textarea"];
    alert("Text Selected!");
});

function getSelectedText(textbox) {//取得选择的文本
    if(document.selection) {
        return document.selection.createRange().text;//IE
    } else {
        return textbox.value.substring(textbox.selectionStart, textbox.selectionEnd);//非IE
    }
}

function selectText(textbox, startIndex, endIndex) {//跨浏览器实现选择部分文本
    if(textbox.setSelectionRange) {//非IE
        textbox.setSelectionRange(startIndex, endIndex);//setSelectionRange()方法
    } else if(textbox.createTextRange) {//IE
        var renge = textbox.createTextRange();
        range.collapse(true);
        range.moveStart("character", startIndex);
        range.moveEnd("character",endIndex - startIndex);
        range.select();
    }
    textbox.focus();
}
textarea.value = "Hello World!";
//selectText(textarea, 0, 6);//Hello W
selectText(textarea, 0, textarea.value.length);//Hello World!

 

过滤输入
屏蔽字符

var textarea = document.forms[0].elements["textarea"];
EventUtil.addHandler(textbox, "keypress", function(event) {
    event = EventUtil.getEvent(event);
    EventUtil.preventDefault(event);//所有按键操作都被屏蔽,文本框变成只读的
});
EventUtil.addHandler(textarea, "keypress", function(event) {
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    var charCode = EventUtil.getCharCode(event);
    if(!/\d/.test(String.fromCharCode(charCode))) {//确定输入的是不是数值
        EventUtil.preventDefault(event);//忽略非数值
    }
    if(!/\d/.test(String.fromCharCode(charCode)) && charCode > 9) {//屏蔽非数值字符,但不屏蔽那些也会触发keypress事件的按键
        EventUtil.preventDefault(event);
    }
    if(!/\d/.test(String.fromCharCode(charCode)) && charCode > 9 && !event.ctrlKey) {//确保没有按下ctrl键
        EventUtil.preventDefault(event);
    }
});

 

操作剪贴板


 

var textarea = document.forms[0].elements["textarea"];
EventUtil.addHandler(textarea, "paste", function(event) {//FF不支持
    event = EventUtil.getEvent(event);
    var text = EventUtil.getClipboardText(event);
    if(!/^\d*$/.test(text)) {//只有数值才被粘贴
        EventUtil.preventDefault(event);
    }
});
EventUtil.addHandler(textarea, "copy", function(event) {//覆盖文本框的copy事件,FF不支持
    event = EventUtil.getEvent(event);
    EventUtil.preventDefault(event);
    EventUtil.setClipboardText(event, "Hello World!");
});


原文地址:http://www.itmmd.com/201411/217.html
该文章由 萌萌的IT人 整理发布,转载须标明出处。

Spring mvc新手入门(3)-前后台url映射详细步骤   上一篇
下一篇  JavaScript 教程学习笔记(1)-cookie学习

精彩回复
发表评论
姓名:       

《程序员app》专门为程序员量身定做!