2017-02-03 5 views
1

私は250文字以上を押すと起動するkeydownイベントを追加したいと思います。ここで私はポップアップが表示だったとも私は文字を入力することができますが、今私は、ユーザーが250文字以上の任意の文字を入力することができませんイベントをonkeydownを使用する251文字を押したコード、Ext.Message.Boxで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); 
    } 
} 

です。

+0

ユーザーに通知するか、入力を許可したくないですか? –

+0

私はユーザーに通知したい。 –

答えて

1

を超えた場合は、テキストの長さをチェックし、ユーザに通知するkeypressイベントを使用する必要があるユーザーに通知しますこれを試して、それも働いています。

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

テキストボックスのmaxLength設定を使用し、setMaxLengthを呼び出して250文字に設定します。
賢者のドキュメントから。

入力可能な最大文字数。

だからあなたのコードは次のようになります。あなたは、ユーザーが文字の上限は、あなたがmaxLengthを使用することができ、彼はより多くのcharctersを入力することができません&到達したことを通知したくない場合は

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

maxlengthを設定するには、textarea要素の要素(htmlではなくextjs)を使用します。

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

我々は長さが、私は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>

+0

okありがとうございましたが、250以上の文字を入力しようとした場合、ユーザーが警告のOKボタンをクリックした後、ユーザーがテキストエリアに何も入力できなくなったことをユーザーに通知する必要があります。今のところ、ポップアップは250文字を入力した後に表示されていたが、ポップアップのOKボタンをクリックすると表示されていた文字以外の文字が入力された場合はポップアップが再開されたので、250文字後にユーザーに入力を制限したい。ご理解頂けるとありがたいです。 –

+0

そのために、キープレスイベントを使用して長さを確認し、ユーザーに通知し制限します。私の更新答えを見てください –

関連する問題