extern/egroupware
1
0
Fork 1
mirror of https://github.com/EGroupware/egroupware.git synced 2024-11-08 09:04:53 +01:00
Code Issues Packages Projects Releases Wiki Activity

Implement blur/placeholder for textbox

Browse Source
This commit is contained in:
Nathan Gray 2011-08-25 23:39:34 +00:00
parent 105c79883f
commit 890efd006b
2 changed files with 28 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
etemplate/js/et2_widget_textbox.js
View File

@ -36,7 +36,12 @@ var et2_textbox = et2_inputWidget.extend({
"default": et2_no_init,
"description": "Field width"
},
"blur": {
"name": "Placeholder",
"type": "string",
"default": "",
"description": "This text get displayed if an input-field is empty and does not have the input-focus (blur). It can be used to show a default value or a kind of help-text."
},
// These for multi-line
"rows": {
"name": "Rows",
@ -83,6 +88,9 @@ var et2_textbox = et2_inputWidget.extend({
if(this.size) {
this.set_size(this.size);
}
if(this.blur) {
this.set_blur(this.blur);
}
this.input.addClass("et2_textbox");
this.setDOMNode(this.input[0]);
@ -99,6 +107,23 @@ var et2_textbox = et2_inputWidget.extend({
this.size = _size;
this.input.attr("size", this.size);
}
},
set_blur: function(_value) {
if(_value) {
this.input.attr("placeholder", _value + "!"); // HTML5
if(!this.input[0].placeholder) {
// Not HTML5
if(this.input.val() == "") this.input.val(this.options.blur);
this.input.focus(this,function(e) {
if(e.data.input.val() == e.data.options.blur) e.data.input.val("");
}).blur(this, function(e) {
if(e.data.input.val() == "") e.data.input.val(e.data.options.blur);
});
}
} else {
this.input.removeAttr("placeholder");
}
}
});

4
etemplate/js/test/et2_test_basic_widgets.xet
View File

@ -3,9 +3,9 @@
<!-- Test without template -->
<vbox>
<description value="This is a label" id="label_value"/>
<textbox label="This is a text" id="text_value"/>
<textbox label="This is a text" id="text_value" blur="Textbox"/>
<textbox label="This is required text" id="text_value" required="true"/>
<int label="This is an integer" id="integer_value" min="5"/>
<int label="This is an integer" id="integer_value" min="5" blur="Min 5"/>
<textbox type="float" label="This is a float" id="float_value"/>
<textbox multiline="true" label="This is a text area" id="text_area_value" rows="3" cols="3"/>
<checkbox label="Checkbox %s here" id="checkbox_value"/>