表单—文本框脚本

本文对表单中的文本框脚本稍作整理，希望对大家有帮助。

在HTML中文本框有两种写法:
1.input元素的单行文本，
2.textarea的多行文本框。
使用input方式，必须添加type，设置为“text”。

  1. size特性，可以指定文本框内能够显示的字符数。
  1. value属性可以设置文本框的初始值。
  2. maxlength特性则是用于指定文本框内可以接受的最大字符数。
    <input type=”text” size=”25” maxlength=”50” value=”initial value”>
    textarea的初始值则必须放在开始和结束标签之内。
  3. cols是文本框字符行数；
  4. rows是文本框字符列数；
    <textarea rows=”25” cols=”5”>initial value</textvalue>
    另外，不能在HTML中给textarea指定最大字符数；

用户输入的内容都保存在value中，最好不要用DOM处理value。

1.选择文本

上述两种文本框都支持select()方法，这个方法主要用于选择文本框中的所有文本。不接受任何参数。
与这个方法对应的select事件，在选择了文本框中的文本时事件触发。

1.1 select()方法

下面的代码是只要文本框获得焦点，就会选择全部的文本：

var textBox = document.getElementById("myForm").elements["textbox1"];

textBox.addEventListener("focus", function () {
  event.target.select();
});

1.2 select事件

何时触发该事件：

  1. 一般情况下只有用户选择了文本（而且要释放鼠标），才会触发select事件；
  2. IE8及更早版本中，只要用户选择了一个字母（不必释放鼠标），就会触发select事件；
  3. 在调用select()方法时也会触发；
    如：
var textBox = document.getElementById("myForm").elements["firstName"];
//设置默认值
textBox.addEventListener("select", function () {
  console.log("selected");
});

1.3 取得选择的文本

利用两个属性：

  1. selectionStart
  2. selectionEnd
    这两个属性保存的是基于0的数值，表示所选择文本的范围（偏移量）。
    使用substring()方法。
    因此要取得用户选择的文本框中的文本，可以使用如下代码：
textBox.addEventListener("select", function () {
  var selected = textBox.value.substring(textBox.selectionStart,textBox.selectionEnd);
  console.log(selected); 
});

另外，也可以用该属性来设置当获得焦点的时候默认全选的状态：

textBox.addEventListener("focus", function () {
  textBox.selectionStart = "0";
  textBox.selectionEnd = textBox.value.length;
});

或者：

textBox.addEventListener("focus", function () {
  textBox.blur();
});

但是，使用selectionStart/End属性时，IE8不支持，但支持另一个名为
document.selection对象，该对象保存着用户在整个文档范围内选择的文本信息
获取选择的文本的兼容版本为：

function getSelectedText (textbox) {
  if (typeof textbox.selectionStart == "number") {
    return textbox.value.substring(textbox.selectionStart,textbox.selectionEnd);
  }else if (document.selection) {
    return document.selection.createRange().text;
  }
}
//调用document.selection时，不需要考虑textbox参数。

1.4 选择部分文本

选择部分文本的方法是:
setSelectionRange()方法。
接收两个参数：要选择第一个字符的索引和最后一个字符的索引。
如阻止用户选择：

textBox.addEventListener("focus", function () {
  textBox.setSelectionRange(0,0);
});
textBox.addEventListener("select", function () {
  textBox.setSelectionRange(0,0);
});

要调用setSelectionRange()之前或之后立即将焦点设置到文本框。而IE中使用的方式是适用范围来解决文本的问题：

var range = textBox.createTextRange();
range.collapse(true); //范围折叠到开头
range.moveStart("Character",0);
range.moveEnd("Character",textBox.value.length);
range.select();

兼容版本：比较常用

function selectText(textbox, startIndex, stopIndex) {
  if (textbox.setSelectionRange) {
    textbox.setSelectionRange(startIndex, stopIndex);
  } else if (textbox.createTextRange()) {
    var range = textbox.createTextRange();
    range.collapse(true); //范围折叠到开头
    range.moveStart("Character", startIndex);
    range.moveEnd("Character", stopIndex);
    range.select();
  };
}

2. 过滤输入

2.1 屏蔽字符

要点：利用正则表达式作为判断条件，根据keypress事件中的charCode、keyCode判断键入的参数。
只能输入数字：

        secret.addEventListener("keypress", function(event){
            var charCode = event.keyCode;
            console.log(charCode);
        
            if(!/\d/.test(String.fromCharCode(charCode)) && charCode>9 && !event.ctrlKey){
                event.preventDefault();
            }
        },false);

2.2 操作剪贴板

剪贴板事件：
beforecopy
copy
beforecut
cut
beforepaste
paste

访问剪贴版数据：clipboardData对象。
方法：
getData(数据类型),
setData(数据类型，要放进去的文本),
clearData()。

3. 自动切换焦点

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS自动切换焦点</title>
<script type="text/javascript">
window.onload = function(){
    var EventUtil = {

        addhandler:function(element,type,handler){
            if(element.addEventListenter){
                element.addEventListenter(type,handler,false);
            }else if(element.attachEvent){
                element.attachEvent("on"+type,handler);
            }else{
                element["on"+type] = handler;
            }
        },     
        /*
        该方法返回Event对象的引用，考虑到IE中对事件的位置的不同，可以使用这个方法取得Event对象。
        */
        getEvent: function(event){
            return event ? event: window.event;
        },  
        //返回事件的目标
        getTarget: function(){
            return event.target || event.srcElement;
        },
        /*通过比较用户输入的值与文本框的maxlength特性，确定是否达到最大长度
        当两个值相等时，则需要查找表单字段的集合，查找到下一个文本框后将焦点切换
        */
        preventDefault: function(){
            if(event.preventDefault){
                event.preventDefault();
            }else{
                event.returnValue = false;
            }
        },
        stopPropagation: function(){
            if(event.stopPropagation){
                event.stopPropagation();
            }else{
                event.cancelBuddle = true;
            }
        },
        removehandler: function(element,type,handler){
            if(element.removeEventListenter){
                element.addEventListenter(type,handler,false);
            }else if(element.detachEvent){
                element.detachEvent("on"+type,handler);
            }else{
                element["on" +type] = null;
            }
        },
        getCharCode:function(event){
            if(typeof event.charCode == "number"){
                return event.charCode;
            }else{
                return event.keyCode;
            }
        },
        //处理字符编码
    }

    var textarea = document.forms[0].elements["text"];
    var button = document.getElementById("button");

    (function(){
        function tabForward(event){     //event事件对象传到事件处理程序中去
            event = EventUtil.getEvent(event);    //把event传给getEvent()方法
            var target = EventUtil.getTarget(event);

            if(target.value.length == target.maxLength) {    //达到最大长度
                var form = target.parentElement;

                for(var i=0, len=form.elements.length; i<len-1; i++)
                {
                    if(form.elements[i] == target){
                        form.elements[i+1].focus();  //切换焦点
                        return;
                    }
                }
            }
        }
        var textName = document.getElementById("textName");
        var textTel = document.getElementById("textTel");
        var textID = document.getElementById("textID");

        EventUtil.addhandler(textName,"keyup",tabForward);   //在用户输入新字符后触发keyup事件
        EventUtil.addhandler(textTel,"keyup",tabForward);
        EventUtil.addhandler(textID,"keyup",tabForward);
    })();
}
</script>
</head>

<body>
    <form>
        <input type="text" name="Name" id="textName" maxlength="5" placeholder="您的姓名"/>
        <input type="text" name="Tel" id="textTel" maxlength="11" placeholder="您的电话号码"/>
        <input type="text" name="ID" id="textID" maxlength="5" placeholder="您的ID"/>

    </form>
</body>
</html>

4. HTML5约束验证API

1.必填字段required
2.其他类型输入：email，url
3.数值范围：number、min、max、step
4.输入模式：pattern
5.检测有效性：checkValidity()
6.禁止验证：novalidate

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,482评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,377评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 152,762评论 0赞 342
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,273评论 1赞 279
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,289评论 5赞 373
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,046评论 1赞 285
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,351评论 3赞 400
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,988评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,476评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,948评论 2赞 324
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,064评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,712评论 4赞 323
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,261评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,264评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,486评论 1赞 262
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,511评论 2赞 354
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,802评论 2赞 345

推荐阅读更多精彩内容

  • JS表单脚本
    表单基础知识 在HTML中，表单是由 元素来表示的，而在JS中，表单对应的则是HTMLFormElement类型。...
    oWSQo阅读 903评论 0赞 1
  • 14 表单脚本
    本章内容 理解表单 文本框验证与交互 使用其他表单控制 14.1 表单的基础知识 通过document.forms...
    闷油瓶小张阅读 360评论 0赞 0
  • 父亲写的散文诗
    听李健唱《父亲写的散文诗》一遍又一遍，朴实无华的歌词，却似乎有着无限的张力，随着音乐娓娓道来的感觉直达心底，引人不...
    墨痕愫语阅读 1,264评论 6赞 9