為了給使用者更多的提示,讓使用者順利完成表單,我們會在 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;
....
});
12 月 25 2012
[Ext JS] Ext.form.field.Text 的 emptyText
為了給使用者更多的提示,讓使用者順利完成表單,我們會在 web 表單的 text 欄位使用如下的語法:
在 Ext JS ,則是透過 Ext.form.field.Text 的 emptyText 來實作此一效果:
Ext JS 已經開始使用 HTML5 的語法,所以在部份瀏覽器上, Ext JS 改用 input 的 placeholder 屬性來實作;根據說明,該屬性應有相同效果,與 onfocus、onblur 作連動。
但在 Ext JS 4.1.0,已經設定 emptyText 的 Ext.form.field.Text 元件卻不會在滑鼠點選後清空文字。
目前的解法是讓 Ext JS 捨棄 placeholder 的實作;方法如下:
By Joe Horn • Javascript, WWW 0 • Tags: emptyText, Ext JS, HTML5, Javascript, onblur, onfocus, placeholder, textfield