none
用javascript令用户在Textbox的输入产生替换效果求助 RRS feed

  • 问题

  • 因为在表格中使用日期控件和验证控件严重拖慢了刷新速度,想搞个像VC6的DateTimePicker那样的纯打字的日期型Textbox,Textbox上会预设一个初始值,如 2010年1月18日,初始值(英式)为 18/01/2010 ,现在用js限制了输入只能是数字类,我想是用户在输入数字时,替换掉他所在光标后一个的数字,如用户把光标放在了最前,输入0就直接成了08/01/2010,到‘/’就变掉它后面那个,这样就可以限制输入格式是 dd/mm/yyyy 离开时我再进行有效验证,现在这个输入时替换并同时移动光标该怎么做?
    2010年1月19日 6:30

答案

  • 自己解决了,移动光标就会产生替换的效果,先移动光标,再让输入生效,就会把在输入前光标后一个的字替换掉,yeah!
    • 已标记为答案 scate233 2010年1月20日 4:26
    2010年1月20日 4:26
  • <script language="javascript">
            //        function onkeydownHandler() {
            //            var tb = document.getElementById("tbName");
            //            var cursorIndex = GetCursorIndexOfTextBox(tb);
            //            //alert("此时光标的index是 " + cursorIndex);
            //            var str = tb.value;
            //           

            //        }

            function GetCursorIndexOfTextBox(obj) {
                obj.focus(); //textbox获取焦点
                var workRange = document.selection.createRange(); //根据选中的文本区创建一个workRange
                var workRange_copy = document.selection.createRange(); //根据选中的文本区再创建一个workRange,用于备份textbox的初始状态,便于恢复初始状态
                obj.select(); //textbox的全部文本被选中
                var allRange = document.selection.createRange(); //allRange表示全部文本区
                workRange.setEndPoint("StartToStart", allRange); //将workRange的开始点移到allRange的开始点
                var cursorposition = workRange.text.length; //获取此时的workRange的Text的长度,即为光标所在文本中的Index
                workRange.collapse(false); //将workRange的插入点移到workRange的结尾处
                workRange_copy.select(); //恢复textbox原先的状态
                return cursorposition;    //返回光标所在文本的index(从0开始)
            }
            function onkeydownHandler(oEvent) {
                //alert(oEvent.keyCode);
                if ((oEvent.keyCode == 39) || (oEvent.keyCode == 37) || (oEvent.keyCode == 8)) {
                    return true;
                }
                else {
                    if (((oEvent.keyCode < 46) || (oEvent.keyCode > 105) || (oEvent.keyCode > 57 && oEvent.keyCode < 96))) {
                        return false;
                    }
                }

                var tb = document.getElementById("tbName");
                var cursorIndex = GetCursorIndexOfTextBox(tb);
                var str = tb.value;
                var nextStr = str.substring(cursorIndex, cursorIndex + 1);
                if ((nextStr == "/")) {
                    return false;
                }

                var workRange = document.selection.createRange();
                workRange.moveEnd("character", 1);
                workRange.select();


            }

        </script>

        <input id="tbName" type="text" onkeydown="javascript:return onkeydownHandler(event)"
            value="12/30/2008" />


    Microsoft Online Community Support
    • 已标记为答案 scate233 2010年1月20日 6:38
    2010年1月20日 5:07

全部回复

  • 用asp.net ajax的CalendarExtender
    2010年1月19日 7:37
  • 用asp.net ajax的CalendarExtender

    之前就是因为有一大堆这些东西结果速度慢了很多,所以才要弄这种textbox的
    2010年1月19日 7:44
  • 用asp.net ajax的CalendarExtender

    之前就是因为有一大堆这些东西结果速度慢了很多,所以才要弄这种textbox的

    http://www.open-open.com/ajax/Calendar.htm  jquery
    2010年1月19日 8:41
  • 自己解决了,移动光标就会产生替换的效果,先移动光标,再让输入生效,就会把在输入前光标后一个的字替换掉,yeah!
    • 已标记为答案 scate233 2010年1月20日 4:26
    2010年1月20日 4:26
  • <script language="javascript">
            //        function onkeydownHandler() {
            //            var tb = document.getElementById("tbName");
            //            var cursorIndex = GetCursorIndexOfTextBox(tb);
            //            //alert("此时光标的index是 " + cursorIndex);
            //            var str = tb.value;
            //           

            //        }

            function GetCursorIndexOfTextBox(obj) {
                obj.focus(); //textbox获取焦点
                var workRange = document.selection.createRange(); //根据选中的文本区创建一个workRange
                var workRange_copy = document.selection.createRange(); //根据选中的文本区再创建一个workRange,用于备份textbox的初始状态,便于恢复初始状态
                obj.select(); //textbox的全部文本被选中
                var allRange = document.selection.createRange(); //allRange表示全部文本区
                workRange.setEndPoint("StartToStart", allRange); //将workRange的开始点移到allRange的开始点
                var cursorposition = workRange.text.length; //获取此时的workRange的Text的长度,即为光标所在文本中的Index
                workRange.collapse(false); //将workRange的插入点移到workRange的结尾处
                workRange_copy.select(); //恢复textbox原先的状态
                return cursorposition;    //返回光标所在文本的index(从0开始)
            }
            function onkeydownHandler(oEvent) {
                //alert(oEvent.keyCode);
                if ((oEvent.keyCode == 39) || (oEvent.keyCode == 37) || (oEvent.keyCode == 8)) {
                    return true;
                }
                else {
                    if (((oEvent.keyCode < 46) || (oEvent.keyCode > 105) || (oEvent.keyCode > 57 && oEvent.keyCode < 96))) {
                        return false;
                    }
                }

                var tb = document.getElementById("tbName");
                var cursorIndex = GetCursorIndexOfTextBox(tb);
                var str = tb.value;
                var nextStr = str.substring(cursorIndex, cursorIndex + 1);
                if ((nextStr == "/")) {
                    return false;
                }

                var workRange = document.selection.createRange();
                workRange.moveEnd("character", 1);
                workRange.select();


            }

        </script>

        <input id="tbName" type="text" onkeydown="javascript:return onkeydownHandler(event)"
            value="12/30/2008" />


    Microsoft Online Community Support
    • 已标记为答案 scate233 2010年1月20日 6:38
    2010年1月20日 5:07
  • 对于光标的移动有个疑问,它移动的方向是Start 和End 他会不会根据textbox的字是从左到右出现还是从右到左出现而改变呢?
    还有就是在不对textbox进行任何干预时,按下按钮和移动光标对于执行来说是那个先走?
    我现在做的用于替换是先像End方向移动1,然后允许输入生效,那么替换就自动完成了,也就是说在命令光标移动1时,产生了一个rage,然后就像是鼠标拖了一块区域然后用输入字符覆盖这样的效果?
    2010年1月20日 6:48
  • 我上面代码的最后就是这样实现的。类似于选中了那个字符我们再按下键,这样自动就用我们输入的代替了选中的。

    肯定是先有输入字符,光标才会移动的。

    对于你说的第一个问题我刚才测试了下,end就是end,它默认的一直是从左往右。


    Microsoft Online Community Support
    2010年1月20日 6:58