如何在 Ext.Message.Box 中使用 keydown 事件

Question

我想添加按下超过 250 个字符时触发的按键事件。这是代码，

var c = Ext.MessageBox.show({
    title: "Version Remarks",
    id:'test',
    inputType: "textareafield",
    msg:"Please Enter Version Remarks: (Only 250 Character)",
    width: 375,
    buttons: Ext.MessageBox.OKCANCEL,
    multiline: true,
    label: Ext.MessageBox.label,
    fn: b,
    icon: Ext.MessageBox.INFO,
    modal: true,
    closable: false,
    allowBlank: false,

});

c.textArea.on('change', function (e, text, o) {

    if (text.length > 250) {
        c.msgButtons.ok.setDisabled(true);
        //c.label.setText("This is the label");
        alert("You are not able to enter more than 250 Character.!!")
    } else {
        c.msgButtons.ok.setDisabled(false);
    }
}

当我按下 251 个字符时，会显示弹出窗口并允许我输入字符，但现在我想使用 onkeydown 事件，它不允许用户输入超过 250 个字符的任何字符。

Answer 1

使用文本框的 maxLength 配置并调用 setMaxLength 将其设置为 250 个字符。
来自 sencha 文档。

The maximum number of permitted input characters.

因此您的代码如下所示：

var c = Ext.MessageBox.show({
     // your config
});
c.textArea.setMaxLength(250);

Answer 2

如果您不希望用户通知已达到最大字符数限制并且不允许他输入更多字符，那么您可以使用 textarea 元素的 maxLength 属性（html 不是 extjs) 来设置最大长度。

c.textArea.el.dom.querySelector('textarea').maxLength=250;

为了通知用户，我们需要使用 keypress 事件来检查文本的长度并在长度超过 250 时通知用户。

工作示例

Ext.application({
    launch : function() {
var c = Ext.MessageBox.show({
    title: "Version Remarks",
    id:'test',
    inputType: "textareafield",
    msg:"Please Enter Version Remarks: (Only 250 Character)",
    width: 375,
    buttons: Ext.MessageBox.OKCANCEL,
    multiline: true,
    label: Ext.MessageBox.label,
    icon: Ext.MessageBox.INFO,
    modal: true,
    closable: false,
    allowBlank: false,

});
c.textArea.el.dom.querySelector('textarea').maxLength=250;
c.textArea.el.dom.querySelector('textarea').onkeypress=function(){
if(this.value.length==250){
 alert("You are not able to enter more than 250 Character.!!");
 return false;
}  };

}


});

<link rel="stylesheet" href="https://cdn.sencha.com/ext/gpl/4.1.1/resources/css/ext-all.css">
<script type="text/javascript" src="https://cdn.sencha.com/ext/gpl/4.1.1/ext-all-debug.js"></script>

Answer 3

我试过了，也行。

var c = Ext.MessageBox.show({
        title: "Version Remarks",
        id: 'test',
        inputType: "textareafield",
        msg: "Please Enter Version Remarks: (Only 250 Character)",
        width: 375,
        buttons: Ext.MessageBox.OKCANCEL,
        multiline: true,
        label: Ext.MessageBox.label,
        fn: b,
        icon: Ext.MessageBox.INFO,
        modal: true,
        closable: false,
        allowBlank: false,

    });

    c.textField.maxLength = 250;
    c.textArea.el.dom.querySelector('textarea').onkeyup = function () {
        if (this.value.length > 250) {
            this.value = this.value.substr(0, 250);
            alert("Maximum 250 characters are allowed for version remark.");
            return false;
        }
    };

如何在 Ext.Message.Box 中使用 keydown 事件

How to use keydown event in Ext.Message.Box

javascript

extjs

sencha-touch