[Ext JS] Ext.form.field.Text 的 emptyText

為了給使用者更多的提示,讓使用者順利完成表單,我們會在 web 表單的 text 欄位使用如下的語法:

<input type="text" value="Search keyword(s)" name="s" id="s"
       onfocus="if (this.value == 'Search keyword(s)') {this.value = '';}"
       onblur="if (this.value == '') {this.value = 'Search keyword(s)';}" />

Ext JS ,則是透過 Ext.form.field.Text 的 emptyText 來實作此一效果:

Ext.create('Ext.form.field.Text', {
	id: 's' ,
	name: 's' ,
	emptyText: 'Search keyword(s)'
});

Ext JS 已經開始使用 HTML5 的語法,所以在部份瀏覽器上, Ext JS 改用 input 的 placeholder 屬性來實作;根據說明,該屬性應有相同效果,與 onfocusonblur 作連動。
但在 Ext JS 4.1.0,已經設定 emptyTextExt.form.field.Text 元件卻不會在滑鼠點選後清空文字。

目前的解法是讓 Ext JS 捨棄 placeholder 的實作;方法如下:

Ext.onReady( function() {
	Ext.supports.Placeholder = false;
	....
});
Tweet 20
fb-share-icon20