javascript高级程序设计学习笔记-表单脚本-文本框脚本

本文介绍了一种跨浏览器的文本选择方法，包括获取已选文本和设置文本选择范围的功能。同时，还展示了如何过滤输入，禁止非数字输入，以及实现自动切换焦点的技巧，适用于多种输入框。

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

取得选择的文本

function getSelectText(obj){
    if (typeof obj.selectionStart == 'number') {
        return obj.value.substring(obj.selectionStart,obj.selectionEnd)        
    }else if (document.selection) {
        return document.selection.createRange().text
    }
}

跨浏览器选择文本

//跨浏览器选择文本
function selectText(textbox,startIndex,stopIndex){
    if (textbox.setSelectionRange) {
        textbox.setSelectionRange(startIndex,stopIndex)
    } else if (textbox.createTextRange) {
        var range = textbox.createTextRange()
        range.collapse()    //将范围折叠到start处
        range.moveStart('character',startIndex)
        range.moveEnd('character',stopIndex - startIndex)
        range.select()

    }
    textbox.focus()
}

//使用
textbox.value = 'Hello world!'
//选择所有文本
selectText(textbox,0,textbox.value.length)
//选择前3个字符
selectText(textbox,0,3)
//选择下标为4~6的字符
selectText(textbox,4,7) //'o w'
//输出选择的字符
console.log(getSelectText(textbox) + ' 被选择了')

过滤输入（禁用非数字键盘操作）

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) {
        EventUtil.preventDefault(event)
    }
})

自动切换焦点

<form action="" id="myForm">
    <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">
</form>

<script>

(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 txtTels1 = document.getElementById('txtTel1')
    var txtTels2 = document.getElementById('txtTel2')
    var txtTels3 = document.getElementById('txtTel3')

    EventUtil.addHandler(txtTels1,'keyup',tabForward)
    EventUtil.addHandler(txtTels2,'keyup',tabForward)
    EventUtil.addHandler(txtTels3,'keyup',tabForward)

})()

</script>