【javascript】文本框脚本和选择框脚本

文本框脚本

• 在HTML 中，有两种方式来表现文本框：一种是使用<input>元素的单行文本框，另一种是使用<textarea>的多行文本框。

<input type="text" size="25" maxlength="50" value="initial value">
<textarea rows="25" cols="5">initial value</textarea>

• 将用户输入的内容保存在value 属性中。可以通过这个属性读取和设置文本框的值。

var textbox = document.forms[0].elements["textbox1"];
alert(textbox.value);
textbox.value = "Some new value";

//事件处理程序，方便后面使用
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;
        }
    },
    getEvent: function(event){
        return event ? event : window.event;
    },
    getTarget: function(event){
        return event.target || event.srcElement;
    },
    getCharCode: function(event){
        if (typeof event.charCode == "number"){
            return event.charCode;
        } else {
            return event.keyCode;
        }
    },
    preventDefault: function(event){
        if (event.preventDefault){
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    }
    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;
        }
    }
};

1、选择文本

• select()方法，这个方法用于选择文本框中的所有文本。这个方法不接受参数，可以在任何时候被调用。

var textbox = document.forms[0].elements["textbox1"];
textbox.select();

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

(1)选择select事件

• 在选择了文本框中的文本时，就会触发select事件。

var textbox = document.forms[0].elements["textbox1"];
EventUtil.addHandler(textbox, "select", function(event){
    var alert("Text selected" + textbox.value);
});

(2)取得选择的文本

• HTML5规范中添加了两个属性：selectionStart和selectionEnd。这两个属性中保存的是基于0 的数值，表示所选择文本的范围（即文本选区开头和结尾的偏移量）。

//取得用户在文本框中选择的文本
function getSelectedText(textbox){
    return textbox.value.substring(textbox.selectionStart, textbox.selectionEnd);
}

//兼容IE8

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;
    }
}

(3)选择部分文本

• 所有文本框都有一个setSelectionRange()方法。这个方法接收两个参数：要选择的第一个字符的索引和要选择的最后一个字符之后的字符的索引。

textbox.value = "Hello world!"

//选择所有文本
textbox.setSelectionRange(0, textbox.value.length); //"Hello world!"

//选择前3 个字符
textbox.setSelectionRange(0, 3); //"Hel"

//选择第4 到第6 个字符
textbox.setSelectionRange(4, 7); //"o w"

//实现跨浏览器编程，兼容IE
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 - startIndex);
        range.select();
    }
    textbox.focus();
}

textbox.value = "Hello world!"

//选择所有文本
selectText(textbox, 0, textbox.value.length); //"Hello world!"

//选择前3 个字符
selectText(textbox, 0, 3); //"Hel"

//选择第4 到第6 个字符
selectText(textbox, 4, 7); //"o w"

2、过滤输入

• 综合运用事件和DOM 手段，就可以将普通的文本框转换成能够理解用户输入数据的功能型控件。

(1)屏蔽字符

• 有时候，我们需要用户输入的文本中包含或不包含某些字符。

//只允许用户输入数值,并确保用户没有按下Ctrl键
EventUtil.addHandler(textbox, "keypress", function(event){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    var charCode = EventUtil.getCharCode(event);
    if (!/\d/.test(String.fromCharCode(charCode)
        && charCode > 9 
        &&!event.ctrlKey)){
        EventUtil.preventDefault(event);
    }
});

(2)操作剪切板

• HTML5 规范中，共6 个剪贴板事件。

事件名	含义
beforecopy	在发生复制操作前触发
copy	在发生复制操作时触发
beforecut	在发生剪切操作时触发
cut	在发生剪切操作时触发
beforepaste	在发生粘贴操作前触发
paste	在发生粘贴时触发

• 要访问剪贴板中的数据，可以使用clipboardData 对象：在IE 中，这个对象是window 对象的属性；而在Firefox 4+、Safari 和Chrome 中，这个对象是相应event 对象的属性。
• 为了确保跨浏览器兼容性，最好只在发生剪贴板事件期间使用这个对象。
• 这个clipboardData 对象有三个方法：getData()、setData()和clearData()。其中，getData()用于从剪贴板中取得数据，它接受一个参数，即要取得的数据的格式。
• 在IE 中，有两种数据格式："text"和"URL"。在Firefox、Safari和Chrome中，这个参数是一种MIME 类型；不过，可以用"text"代表"text/plain"。

var EventUtil = {
    //省略的代码
    getClipboardText: function(event){
        var clipboardData = (event.clipboardData || window.clipboardData);
        return clipboardData.getData("text");
    },
    //省略的代码
    setClipboardText: function(event, value){
        if (event.clipboardData){
            return event.clipboardData.setData("text/plain", value);
        } else if (window.clipboardData){
            return window.clipboardData.setData("text", value);
        }
    },
    //省略的代码
};

• 在需要确保粘贴到文本框中的文本中包含某些字符，或者符合某种格式要求时，能够访问剪贴板是非常有用的。

EventUtil.addHandler(textbox, "paste", function(event){
    event = EventUtil.getEvent(event);
    var text = EventUtil.getClipboardText(event);
    if (!/^\d*$/.test(text)){
        EventUtil.preventDefault(event);
    }
});

3、自动切换焦点

• 使用JavaScript 可以从多个方面增强表单字段的易用性。其中，最常见的一种方式就是在用户填写完当前字段时，自动将焦点切换到下一个字段。

<input type="text" name="tel1" id="txtTel1" maxlength="3">
<input type="text" name="tel2" id="txtTel2" maxlength="3">
<input type="text" name="tel3" id="txtTel3" maxlength="4">

• 为增强易用性，同时加快数据输入，可以在前一个文本框中的字符达到最大数量后，自动将焦点切换到下一个文本框。

(function(){
    function tabForward(event){
        event = EventUtil.getEvent(event);
        var target = EventUtil.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 textbox1 = document.getElementById("txtTel1");
    var textbox2 = document.getElementById("txtTel2");
    var textbox3 = document.getElementById("txtTel3");
    EventUtil.addHandler(textbox1, "keyup", tabForward);
    EventUtil.addHandler(textbox2, "keyup", tabForward);
    EventUtil.addHandler(textbox3, "keyup", tabForward);
})();

4、HTML5 约束验证API

• 为了在将表单提交到服务器之前验证数据，HTML5 新增了一些功能。，即便JavaScript
  被禁用或者由于种种原因未能加载，也可以确保基本的验证。

(1)必填字段

• 任何标注有required 的字段，在提交表单时都不能空着。这个属性适用于<input>、<textarea>和<select>字段

<input type="text" name="username" required>

• 在JavaScript 中，通过对应的required 属性，可以检查某个表单字段是否为必填字段。

//测试浏览器是否支持required 属性。
var isRequiredSupported = "required" in document.createElement("input");

//检查字段是否为必填字段
var isUsernameRequired = document.forms[0].elements["username"].required;

(2)其它输入类型

• HTML5 为<input>元素的type属性又增加了几个值。这些新的类型不仅能反映数据类型的信息，而且还能提供一些默认的验证功能

<input type="email" name ="email">
<input type="url" name="homepage">

(3)数值范围

• HTML5定义的一些输入元素要求填写某种基于数字的值："number"、"range"、"datetime"
  "datetime-local"、"date"、"month"、"week"，还有"time"。
• 对所有这些数值类型的输入元素，可以指定min属性（最小的可能值）、max属性（最大的可能值）和step 属性。

<input type="number" min="0" max="100" step="5" name="count">

(4)输入模式

• HTML5 为文本字段新增了pattern属性。这个属性的值是一个正则表达式，用于匹配文本框中的值。

<input type="text" pattern="\d+" name="count">

//访问模式
var pattern = document.forms[0].elements["count"].pattern;

//检测浏览器是否支持pattern 属性。
var isPatternSupported = "pattern" in document.createElement("input");

(5)检测有效性

• 使用checkValidity()方法可以检测表单中的某个字段是否有效。所有表单字段都有个方法，如果字段的值有效，这个方法返回true，否则返回false。

if (document.forms[0].elements[0].checkValidity()){
    //字段有效，继续
} else {
    //字段无效
}

• 要检测整个表单是否有效，可以在表单自身调用checkValidity()方法。如果所有表单字段都有效，这个方法返回true；即使有一个字段无效，这个方法也会返回false。

if(document.forms[0].checkValidity()){
    //表单有效，继续
} else {
    //表单无效
}

• validity 属性则会告诉你为什么字段有效或无效。这个对象中包含一系列属性，每个属性会返回一个布尔值。

属性名	含义
customRrror	如果设置了setCustomValidity()，则返回true，否则返回false
patternMismatch	如果值与指定的pattern 属性不匹配，返回true
rangeOverflow	如果值比max 值大，返回true
rangeUnderflow	如果值比min 值小，返回true
stepMisMatch	如果min 和max 之间的步长值不合理，返回true
tooLong	如果值的长度超过了maxlength 属性指定的长度，返回true
typeMismatch	如果值不是"mail"或"url"要求的格式，返回true
valid	如果这里的其他属性都是false，返回true
valueMissing	如果标注为required 的字段中没有值，返回true

if (input.validity && !input.validity.valid){
    if (input.validity.valueMissing){
        alert("Please specify a value.")
    } else if (input.validity.typeMismatch){
        alert("Please enter an email address.");
    } else {
        alert("Value is invalid.");
    }
}

(6)禁用验证

• 通过设置novalidate 属性，可以告诉表单不进行验证。

<form method="post" action="signup.php" novalidate>
    <!--这里插入表单元素-->
</form>

• 在JavaScript 中使用noValidate属性可以取得或设置这个值，如果这个属性存在，值为true，如果不存在，值为false。

document.forms[0].noValidate = true; //禁用验证

• 如果一个表单中有多个提交按钮，为了指定点击某个提交按钮不必验证表单，可以在相应的按钮上添加formnovalidate 属性。

<form method="post" action="foo.php">
    <!--这里插入表单元素-->
    <input type="submit" value="Regular Submit">
    <input type="submit" formnovalidate name="btnNoValidate"
    value="Non-validating Submit">
</form>

//禁用验证
document.forms[0].elements["btnNoValidate"].formNoValidate = true;

选择框脚本

• 选择框是通过<select>和<option>元素创建的，除了所有表单字段共有的属性和方法外，HTMLSelectElement 类型还提供了下列属性和方法。

属性/方法	含义
add(newOption, relOption)	向控件中插入新<option>元素，其位置在相关项（relOption）之前
multiple	布尔值，表示是否允许多项选择
options	控件中所有<option>元素的HTMLCollection
remove(index)	移除给定位置的选项
selectedIndex	基于0 的选中项的索引，如果没有选中项，则值为-1
size	选择框中可见的行数
value	未选中，为空
	选中一项，html定义value属性，则为value的值
	选择一项，html未定义value属性，则为该项的文本
	有多个选中项，将依据前两条规则取得第一个选中项的值

• 在DOM 中，每个<option>元素都有一个HTMLOptionElement对象表示。为便于访问数据，HTMLOptionElement 对象添加了下列属性。

属性名	含义
index	当前选项在options 集合中的索引。
label	当前选项的标签
selected	布尔值，表示当前选项是否被选中
text	选项的文本
value	选项的值

var selectbox = document.forms[0].elements["location"];

//不推荐，效率低
var text = selectbox.options[0].firstChild.nodeValue; //选项的文本
var value = selectbox.options[0].getAttribute("value"); //选项的值

//推荐
var text = selectbox.options[0].text; //选项的文本
var value = selectbox.options[0].value; //选项的值

1、选择选项

• 对于只允许选择一项的选择框，访问选中项的最简单方式，就是使用选择框的selectedIndex 属性。

var selectedOption = selectbox.options[selectbox.selectedIndex];

• 另一种选择选项的方式，就是取得对某一项的引用，然后将其selected属性设置为true。

selectbox.options[0].selected = true;

• selected 属性的作用主要是确定用户选择了选择框中的哪一项。要取得所有选中的项，
  可以循环遍历选项集合，然后测试每个选项的selected 属性。

function getSelectedOptions(selectbox){
    var result = new Array();
    var option = null;
    for (var i=0, len=selectbox.options.length; i < len; i++){
        option = selectbox.options[i];
        if (option.selected){
            result.push(option);
        }
    }
    return result;
}

2、添加选项

• 可以使用JavaScript 动态创建选项，并将它们添加到选择框中。

//第一种，使用DOM 方法
var newOption = document.createElement("option");
newOption.appendChild(document.createTextNode("Option text"));
newOption.setAttribute("value", "Option value");
selectbox.appendChild(newOption);

//第二种，使用Option 构造函数来创建新选项
var newOption = new Option("Option text", "Option value");
selectbox.appendChild(newOption); //在IE8 及之前版本中有问题

//第三种，使用选择框的add()方法，在列表的最后添加一个选项
var newOption = new Option("Option text", "Option value");
selectbox.add(newOption, undefined); //最佳方案

3、移除选项

• 与添加选项类似，移除选项的方式也有很多种。

//第一种，使用DOM 的removeChild()方法
selectbox.removeChild(selectbox.options[0]); //移除第一个选项

//第二种，使用选择框的remove()方法
selectbox.remove(0); //移除第一个选项

//将相应选项设置为null
selectbox.options[0] = null; //移除第一个选项

• 要清除选择框中所有的项，需要迭代所有选项并逐个移除它们。

function clearSelectbox(selectbox){
    for(var i=0, len=selectbox.options.length; i < len; i++){
        selectbox.remove(i);
    }
}

4、移动和重排选项

• 使用DOM 的appendChild()方法，可以将第一个选择框中的选项直接移动到第二个选择框中。

//selLocations1中减少一项，成为selLocations2的最后一项
var selectbox1 = document.getElementById("selLocations1");
var selectbox2 = document.getElementById("selLocations2");
selectbox2.appendChild(selectbox1.options[0]);

• 要将选择框中的某一项移动到特定位置，最合适的DOM 方法就是insertBefore()

//在选择框中向前移动一个选项的位置
var optionToMove = selectbox.options[1];
selectbox.insertBefore(optionToMove, selectbox.options[optionToMove.index-1]);

好好学习