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

Question

我想添加按下超過250個字符時觸發的keydown事件。這裏是代碼，

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

我試過這個，它也有效。

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; 
     } 
    }; 

Answer 2

使用文本框的maxLength配置並調用setMaxLength將其設置爲250個字符。
來自sencha文檔。

允許的輸入字符的最大數量。

所以，你的代碼看起來像：

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

Answer 3

如果不希望用戶在通知到達&字符是上限不允許他進入更charcters那麼你可以使用maxLengthtextarea元素的屬性（html不是extjs）來設置maxlength。

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>