表单(二)文本框

本文介绍了HTML中的文本框,包括单行和多行文本框的使用,讲解了如何选择和过滤用户输入,实现自动切换焦点的功能,并探讨了HTML5的约束验证API在表单验证中的应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

表现文本框的两种方式:单行文本框<input>、多行文本框<textarea>

<input type="text" size="显示的字符数" value="文本框的初始值" maxlength="可以接收的最大字符数">
<textarea rows="文本框的字符行数" cols="文本框的字符列数">文本框的初始值</textarea>

两者都是把用户输入的内容保存在value属性中。可以通过 “文本框.value ” 来读取或设置文本框的值


【选择文本】

1.获取文本框中的所有文本: 文本框.select()

使用select方法时,大多数浏览器(opera除外)会将焦点设置到文本框中。同时使用该方法会触发select事件。

//在文本框获得焦点时,选择文本框中的所有文本
EventUnit.addHandler(文本框,"focus",function(event){
    event = EventUnit.getEvent(event);
    var target = EventUnit.getTarget(event);
    target.select();
});

2.获取用户选择的那一部分文本:

1. 使用selectionStart和selectionEnd属性

2. IE8及之前版本:使用document.selection对象(selection对象保存着用户在整个文档范围内选择的文本信息)
function getSelectedText(textbox){
    if(typeof textbox.selectionStart == "number"){
       return textbox.value.substring(textbox.selectionStart,textbox.selectionEnd);
    }
    //IE8及更早版本
   else if(document.selection){
       return document.selection.createRange().text;
    }
}

3.选择部分文本 :

1. 文本框.setSelectionRange(起始字符索引,结束字符索引+1)

2. IE8及更早版本:
    (1)在文本框上创建一个范围
    (2)将范围折叠到文本框开始位置
    (3)使用moveStrat()和moveEnd()方法

#倘若想看到选择的文本,就要在调用setSelectionRange方法之前或之后立即把焦点设置到文本框。
//选择部分文本
function setSelectedText(textbox, startIndex, endIndex){
    if(textbox.setSelectionRange){
        return textbox.setSelectionRange(startIndex,endIndex+1);
    }
    else if(textbox.createTextRange){
        var range =textbox.createTextRange();
        range.collapse(true);   //将范围折叠到文本框开始位置
        range.moveStart("character",startIndex); //第一个参数是移动单位,第二个参数是开始位置
        range.moveEnd("character",endIndex+1-startIndex);//第一个参数是移动单位,第二个参数是传入的字符总数
        range.select();
    }
}

【过滤输入】

1.屏蔽字符

//只允许用户输入数值
EventUnit.addHandler(表单.elements[0],"keypress",function(event){
   event = EventUnit.getEvent(event);
   var target = EventUnit.getTarget(event);
  //取得字符编码
   var charCode = EventUnit.getCharCode(event);
 //将字符编码换成字符串
   if(!/\d/.test(String.fromCharCode(charCode)) && charCode > 9 && !event.ctrlKey){
       EventUnit.preventDefault(event);
   }
});

2.操作剪贴板

1. beforecopy    在复制前触发
2. copy          在复制时触发
3. beforecut     在剪切前触发
4. cut           在剪切时触发
5. beforepaste   在粘贴前触发
6. paste         在粘贴时触发

要访问剪贴板中的数据,在IE中使用 window.clipboardData;
在其他浏览器使用 event.clipboardData


【自动切换焦点】

常见应用场景:在用户填写完当前字段后,自动把焦点切换到下一个字段。

//自动切换焦点,通常指定keyup事件,因为keyup事件会在用户输入新字符后触发,所以此时是检测文本框内容长度的最佳时机。

//HTML代码:
<input type="text" name="tel1" id="texTell1" maxlength="3">
<input type="text" name="tel2" id="texTell2" maxlength="3">
<input type="text" name="tel3" id="texTell3" maxlength="4">

//Js代码:
function tabForward(event){
    event = EventUnit.getEvent(event);
    var target = EventUnit.getTarget(event);
    //当输入值的长度满足最大长度时
    if(target.value.length == target.maxLength){
        var form = target.form; //获得当下字段的表单
        for(var i=0,len=form.elements.length;i<len;i++){
            if(form.elements[i] == target){
                //如果存在下个字段
                if(form.elements[i+1]){
                    form.elements[i+1].focus(); //获得焦点
                }
                return;
            }
        }
    }
}
var text1 = document.getElementById("texTell1");
var text2 = document.getElementById("texTell2");
var text3 = document.getElementById("texTell3");
EventUnit.addHandler(text1,"keyup",tabForward);
EventUnit.addHandler(text2,"keyup",tabForward);
EventUnit.addHandler(text3,"keyup",tabForward);

效果如图所示:
当第一个框输完3个数字后,焦点自动切换到第二个框,当第二个框输完3个数字后,焦点自动切换到第三个框。

自动切换焦点


【HTML5约束验证API】

在将表单提交到服务器前验证数据:

1.在表单字段中指定了required属性,在提交表单时不能为空
<input type="text" name="username" required>

(如果指定requires属性的字段没有填写,FireFox4和Opera会阻止表单提交,Chrome和Safari不阻止表单提交)

2.为input的type类型增加了“email”和“url”
3.为input新增了pattern属性,值为一个正则表达式,用于匹配文本框中的值
4.(1)检测 “表单中的某个字段”/“整个表单” 是否有效:
    字段.checkValidity() / 表单.checkValidity()

  (2)检测 “表单中的某个字段” 有效或无效的原因:
    字段.validity
//检测表单中某个字段有效或无效的原因
if(x.validity && !x.validity.valid){
    if(x.validity.valueMissing){
        alert("没有在标注为required的字段中填写值!");
    }
    else if(x.validity.typeMismatch){
        alert("没有按照mail或url要求的格式填写值!");
    }
    else if(x.validity.rangeOverflow){
        alert("输入的值超过max");
    }
    else if(x.validity.rangeUnderflow){
        alert("输入的值少于min");
    }
    else if(x.validity.patternMismatch){
        alert("输入的值与指定的pattern属性不匹配");
    }
    else if(x.validity.tooLong){
        alert("输入的值超过maxlength指定的长度");
    }
}
5.禁用表单验证 : 在form标签上添加 novalidate属性
  点击提交按钮不必验证表单: 在提交按钮上添加formnovalidate属性
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值