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

Question

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

Answer 1

用asp.net ajax的CalendarExtender

Answer 2

用asp.net ajax的CalendarExtender

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

Answer 3

用asp.net ajax的CalendarExtender

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

http://www.open-open.com/ajax/Calendar.htm  jquery

Answer 4

自己解决了，移动光标就会产生替换的效果，先移动光标，再让输入生效，就会把在输入前光标后一个的字替换掉，yeah！

Answer 5

<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

Answer 6

对于光标的移动有个疑问，它移动的方向是Start 和End 他会不会根据textbox的字是从左到右出现还是从右到左出现而改变呢？
还有就是在不对textbox进行任何干预时，按下按钮和移动光标对于执行来说是那个先走？
我现在做的用于替换是先像End方向移动1，然后允许输入生效，那么替换就自动完成了，也就是说在命令光标移动1时，产生了一个rage，然后就像是鼠标拖了一块区域然后用输入字符覆盖这样的效果？

Answer 7

我上面代码的最后就是这样实现的。类似于选中了那个字符我们再按下键，这样自动就用我们输入的代替了选中的。

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

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

---

Microsoft Online Community Support