為了給使用者更多的提示,讓使用者順利完成表單,我們會在 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 屬性來實作;根據說明,該屬性應有相同效果,與 onfocus、onblur 作連動。
但在 Ext JS 4.1.0,已經設定 emptyText 的 Ext.form.field.Text 元件卻不會在滑鼠點選後清空文字。
目前的解法是讓 Ext JS 捨棄 placeholder 的實作;方法如下:
Ext.onReady( function() { Ext.supports.Placeholder = false; .... });