最新消息:发现真没时间折腾VPS,最近又换了个空间。呵呵

dijit.form.DateTextBox按回退键返回上一页的解决方法

dijit.form.DateTextBox在显示日期选择框(Datepicker)时,按回退键(BackSpace)就会返回上一页。

对于这个问题,我觉得是在显示日期选择框(Datepicker)时,没有禁用掉回退键(BackSpace)而造成的。我们可以通过继承dijit.form.DateTextBox,重写显示日期选择框(Datepicker)的函数就可以解决。

如下代码:

JavaScript
require([ 'dojo/_base/event'], function(event) {
    dojo.declare("net.yutuo.dojo.DateTextBox", [dijit.form.DateTextBox], {
        openDropDown : function (callback) {
            this.inherited('openDropDown', arguments);
            if (!this.dropDown) return;

            this.dropDown._onKeyPress = function(evt) {
                if(dojo.keys.BACKSPACE == evt.charOrCode || !this.handleKey(evt)){
                    event.stop(evt);
                }
            };
        }
    });
});

测试代码如下:

HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript"
    src="js/dojo/dojo.js"
    djConfig="parseOnLoad: true"></script>
<link rel="stylesheet" type="text/css"
    href="js/dojo/resources/dojo.css" />
<link rel="stylesheet" type="text/css"
    href="js/dijit/themes/claro/claro.css" />
<title>Dojo Textarea Test</title>

<script type="text/javascript">
    dojo.require("dijit.form.DateTextBox");
    require([ 'dojo/_base/event'], function(event) {
        dojo.declare("net.yutuo.dojo.DateTextBox", [dijit.form.DateTextBox], {
            openDropDown : function (callback) {
                this.inherited('openDropDown', arguments);
                if (!this.dropDown) return;

                this.dropDown._onKeyPress = function(evt) {
                    if(dojo.keys.BACKSPACE == evt.charOrCode || !this.handleKey(evt)){
                        event.stop(evt);
                    }
                };
            }
        });
    });
</script>
</head>

<body class="claro">
    Old: <br/>
    <input id="test1" name="test1" type="text" data-dojo-type="dijit.form.DateTextBox" />

    <br/>
    New: <br/>
    <input id="test2" name="test2" type="text" data-dojo-type="net.yutuo.dojo.DateTextBox" />
</body>

</html>

转载请注明:宇托的狗窝 » dijit.form.DateTextBox按回退键返回上一页的解决方法

发表我的评论
取消评论

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址