]>
git.wh0rd.org - tt-rss.git/blob - lib/dijit/form/TextBox.js
38a9c09d43236604914f3dfc3e58e22ff0b5581d
2 Copyright (c) 2004-2011, The Dojo Foundation All Rights Reserved.
3 Available via Academic Free License >= 2.1 OR the modified BSD license.
4 see: http://dojotoolkit.org/license for details
8 if(!dojo
._hasResource
["dijit.form.TextBox"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
9 dojo
._hasResource
["dijit.form.TextBox"] = true;
10 dojo
.provide("dijit.form.TextBox");
11 dojo
.require("dijit.form._FormWidget");
16 dijit
.form
._FormValueWidget
,
19 // A base class for textbox form inputs
22 // Removes leading and trailing whitespace if true. Default is false.
26 // Converts all characters to uppercase if true. Default is false.
30 // Converts all characters to lowercase if true. Default is false.
33 // propercase: Boolean
34 // Converts the first character of each word to uppercase if true.
38 // HTML INPUT tag maxLength declaration.
41 // selectOnClick: [const] Boolean
42 // If true, all text will be selected when focused with mouse
45 // placeHolder: String
46 // Defines a hint to help users fill out the input field (as defined in HTML 5).
47 // This should only contain plain text (no html markup).
50 templateString
: dojo
.cache("dijit.form", "templates/TextBox.html", "<div class=\"dijit dijitReset dijitInline dijitLeft\" id=\"widget_${id}\" role=\"presentation\"\n\t><div class=\"dijitReset dijitInputField dijitInputContainer\"\n\t\t><input class=\"dijitReset dijitInputInner\" dojoAttachPoint='textbox,focusNode' autocomplete=\"off\"\n\t\t\t${!nameAttrSetting} type='${type}'\n\t/></div\n></div>\n"),
51 _singleNodeTemplate
: '<input class="dijit dijitReset dijitLeft dijitInputField" dojoAttachPoint="textbox,focusNode" autocomplete="off" type="${type}" ${!nameAttrSetting} />',
53 _buttonInputDisabled
: dojo
.isIE
? "disabled" : "", // allows IE to disallow focus, but Firefox cannot be disabled for mousedown events
55 baseClass
: "dijitTextBox",
57 attributeMap
: dojo
.delegate(dijit
.form
._FormValueWidget
.prototype.attributeMap
, {
58 maxLength
: "focusNode"
61 postMixInProperties: function(){
62 var type
= this.type
.toLowerCase();
63 if(this.templateString
&& this.templateString
.toLowerCase() == "input" || ((type
== "hidden" || type
== "file") && this.templateString
== dijit
.form
.TextBox
.prototype.templateString
)){
64 this.templateString
= this._singleNodeTemplate
;
66 this.inherited(arguments
);
69 _setPlaceHolderAttr: function(v
){
70 this._set("placeHolder", v
);
72 this._attachPoints
.push('_phspan');
73 /* dijitInputField class gives placeHolder same padding as the input field
74 * parent node already has dijitInputField class but it doesn't affect this <span>
75 * since it's position: absolute.
77 this._phspan
= dojo
.create('span',{className
:'dijitPlaceHolder dijitInputField'},this.textbox
,'after');
79 this._phspan
.innerHTML
="";
80 this._phspan
.appendChild(document
.createTextNode(v
));
82 this._updatePlaceHolder();
85 _updatePlaceHolder: function(){
87 this._phspan
.style
.display
=(this.placeHolder
&&!this._focused
&&!this.textbox
.value
)?"":"none";
91 _getValueAttr: function(){
93 // Hook so get('value') works as we like.
95 // For `dijit.form.TextBox` this basically returns the value of the <input>.
97 // For `dijit.form.MappedTextBox` subclasses, which have both
98 // a "displayed value" and a separate "submit value",
99 // This treats the "displayed value" as the master value, computing the
100 // submit value from it via this.parse().
101 return this.parse(this.get('displayedValue'), this.constraints
);
104 _setValueAttr: function(value
, /*Boolean?*/ priorityChange
, /*String?*/ formattedValue
){
106 // Hook so set('value', ...) works.
109 // Sets the value of the widget to "value" which can be of
110 // any type as determined by the widget.
113 // The visual element value is also set to a corresponding,
114 // but not necessarily the same, value.
117 // If specified, used to set the visual element value,
118 // otherwise a computed visual value is used.
121 // If true, an onChange event is fired immediately instead of
122 // waiting for the next blur event.
125 if(value
!== undefined){
126 // TODO: this is calling filter() on both the display value and the actual value.
127 // I added a comment to the filter() definition about this, but it should be changed.
128 filteredValue
= this.filter(value
);
129 if(typeof formattedValue
!= "string"){
130 if(filteredValue
!== null && ((typeof filteredValue
!= "number") || !isNaN(filteredValue
))){
131 formattedValue
= this.filter(this.format(filteredValue
, this.constraints
));
132 }else{ formattedValue
= ''; }
135 if(formattedValue
!= null && formattedValue
!= undefined && ((typeof formattedValue
) != "number" || !isNaN(formattedValue
)) && this.textbox
.value
!= formattedValue
){
136 this.textbox
.value
= formattedValue
;
137 this._set("displayedValue", this.get("displayedValue"));
140 this._updatePlaceHolder();
142 this.inherited(arguments
, [filteredValue
, priorityChange
]);
145 // displayedValue: String
146 // For subclasses like ComboBox where the displayed value
147 // (ex: Kentucky) and the serialized value (ex: KY) are different,
148 // this represents the displayed value.
150 // Setting 'displayedValue' through set('displayedValue', ...)
151 // updates 'value', and vice-versa. Otherwise 'value' is updated
152 // from 'displayedValue' periodically, like onBlur etc.
154 // TODO: move declaration to MappedTextBox?
155 // Problem is that ComboBox references displayedValue,
156 // for benefit of FilteringSelect.
159 getDisplayedValue: function(){
161 // Deprecated. Use get('displayedValue') instead.
164 dojo
.deprecated(this.declaredClass
+"::getDisplayedValue() is deprecated. Use set('displayedValue') instead.", "", "2.0");
165 return this.get('displayedValue');
168 _getDisplayedValueAttr: function(){
170 // Hook so get('displayedValue') works.
172 // Returns the displayed value (what the user sees on the screen),
173 // after filtering (ie, trimming spaces etc.).
175 // For some subclasses of TextBox (like ComboBox), the displayed value
176 // is different from the serialized value that's actually
177 // sent to the server (see dijit.form.ValidationTextBox.serialize)
179 // TODO: maybe we should update this.displayedValue on every keystroke so that we don't need
181 // TODO: this isn't really the displayed value when the user is typing
182 return this.filter(this.textbox
.value
);
185 setDisplayedValue: function(/*String*/ value
){
187 // Deprecated. Use set('displayedValue', ...) instead.
190 dojo
.deprecated(this.declaredClass
+"::setDisplayedValue() is deprecated. Use set('displayedValue', ...) instead.", "", "2.0");
191 this.set('displayedValue', value
);
194 _setDisplayedValueAttr: function(/*String*/ value
){
196 // Hook so set('displayedValue', ...) works.
198 // Sets the value of the visual element to the string "value".
199 // The widget value is also set to a corresponding,
200 // but not necessarily the same, value.
202 if(value
=== null || value
=== undefined){ value
= '' }
203 else if(typeof value
!= "string"){ value
= String(value
) }
205 this.textbox
.value
= value
;
207 // sets the serialized value to something corresponding to specified displayedValue
208 // (if possible), and also updates the textbox.value, for example converting "123"
210 this._setValueAttr(this.get('value'), undefined);
212 this._set("displayedValue", this.get('displayedValue'));
215 format: function(/*String*/ value
, /*Object*/ constraints
){
217 // Replacable function to convert a value to a properly formatted string.
219 // protected extension
220 return ((value
== null || value
== undefined) ? "" : (value
.toString
? value
.toString() : value
));
223 parse: function(/*String*/ value
, /*Object*/ constraints
){
225 // Replacable function to convert a formatted string to a value
227 // protected extension
229 return value
; // String
232 _refreshState: function(){
234 // After the user types some characters, etc., this method is
235 // called to check the field for validity etc. The base method
236 // in `dijit.form.TextBox` does nothing, but subclasses override.
241 _onInput: function(e
){
242 if(e
&& e
.type
&& /key/i.test(e
.type
) && e
.keyCode
){
244 case dojo
.keys
.SHIFT
:
251 if(this.intermediateChanges
){
253 // the setTimeout allows the key to post to the widget input box
254 setTimeout(function(){ _this
._handleOnChange(_this
.get('value'), false); }, 0);
256 this._refreshState();
258 // In case someone is watch()'ing for changes to displayedValue
259 this._set("displayedValue", this.get("displayedValue"));
262 postCreate: function(){
263 if(dojo
.isIE
){ // IE INPUT tag fontFamily has to be set directly using STYLE
264 // the setTimeout gives IE a chance to render the TextBox and to deal with font inheritance
265 setTimeout(dojo
.hitch(this, function(){
266 var s
= dojo
.getComputedStyle(this.domNode
);
268 var ff
= s
.fontFamily
;
270 var inputs
= this.domNode
.getElementsByTagName("INPUT");
272 for(var i
=0; i
< inputs
.length
; i
++){
273 inputs
[i
].style
.fontFamily
= ff
;
281 // setting the value here is needed since value="" in the template causes "undefined"
282 // and setting in the DOM (instead of the JS object) helps with form reset actions
283 this.textbox
.setAttribute("value", this.textbox
.value
); // DOM and JS values should be the same
285 this.inherited(arguments
);
287 if(dojo
.isMoz
|| dojo
.isOpera
){
288 this.connect(this.textbox
, "oninput", "_onInput");
290 this.connect(this.textbox
, "onkeydown", "_onInput");
291 this.connect(this.textbox
, "onkeyup", "_onInput");
292 this.connect(this.textbox
, "onpaste", "_onInput");
293 this.connect(this.textbox
, "oncut", "_onInput");
297 _blankValue
: '', // if the textbox is blank, what value should be reported
298 filter: function(val
){
300 // Auto-corrections (such as trimming) that are applied to textbox
301 // value on blur or form submit.
303 // For MappedTextBox subclasses, this is called twice
304 // - once with the display value
305 // - once the value as set/returned by set('value', ...)
306 // and get('value'), ex: a Number for NumberTextBox.
308 // In the latter case it does corrections like converting null to NaN. In
309 // the former case the NumberTextBox.filter() method calls this.inherited()
310 // to execute standard trimming code in TextBox.filter().
312 // TODO: break this into two methods in 2.0
315 // protected extension
316 if(val
=== null){ return this._blankValue
; }
317 if(typeof val
!= "string"){ return val
; }
319 val
= dojo
.trim(val
);
322 val
= val
.toUpperCase();
325 val
= val
.toLowerCase();
328 val
= val
.replace(/[^\s]+/g, function(word
){
329 return word
.substring(0,1).toUpperCase() + word
.substring(1);
335 _setBlurValue: function(){
336 this._setValueAttr(this.get('value'), true);
339 _onBlur: function(e
){
340 if(this.disabled
){ return; }
341 this._setBlurValue();
342 this.inherited(arguments
);
344 if(this._selectOnClickHandle
){
345 this.disconnect(this._selectOnClickHandle
);
347 if(this.selectOnClick
&& dojo
.isMoz
){
348 this.textbox
.selectionStart
= this.textbox
.selectionEnd
= undefined; // clear selection so that the next mouse click doesn't reselect
351 this._updatePlaceHolder();
354 _onFocus: function(/*String*/ by
){
355 if(this.disabled
|| this.readOnly
){ return; }
357 // Select all text on focus via click if nothing already selected.
358 // Since mouse-up will clear the selection need to defer selection until after mouse-up.
359 // Don't do anything on focus by tabbing into the widget since there's no associated mouse-up event.
360 if(this.selectOnClick
&& by
== "mouse"){
361 this._selectOnClickHandle
= this.connect(this.domNode
, "onmouseup", function(){
362 // Only select all text on first click; otherwise users would have no way to clear
364 this.disconnect(this._selectOnClickHandle
);
366 // Check if the user selected some text manually (mouse-down, mouse-move, mouse-up)
367 // and if not, then select all the text
368 var textIsNotSelected
;
370 var range
= dojo
.doc
.selection
.createRange();
371 var parent
= range
.parentElement();
372 textIsNotSelected
= parent
== this.textbox
&& range
.text
.length
== 0;
374 textIsNotSelected
= this.textbox
.selectionStart
== this.textbox
.selectionEnd
;
376 if(textIsNotSelected
){
377 dijit
.selectInputText(this.textbox
);
382 this._updatePlaceHolder();
384 // call this.inherited() before refreshState(), since this.inherited() will possibly scroll the viewport
385 // (to scroll the TextBox into view), which will affect how _refreshState() positions the tooltip
386 this.inherited(arguments
);
388 this._refreshState();
392 // Overrides dijit._FormWidget.reset().
393 // Additionally resets the displayed textbox value to ''
394 this.textbox
.value
= '';
395 this.inherited(arguments
);
400 dijit
.selectInputText = function(/*DomNode*/ element
, /*Number?*/ start
, /*Number?*/ stop
){
402 // Select text in the input element argument, from start (default 0), to stop (default end).
404 // TODO: use functions in _editor/selection.js?
405 var _window
= dojo
.global
;
406 var _document
= dojo
.doc
;
407 element
= dojo
.byId(element
);
408 if(isNaN(start
)){ start
= 0; }
409 if(isNaN(stop
)){ stop
= element
.value
? element
.value
.length
: 0; }
410 dijit
.focus(element
);
411 if(_document
["selection"] && dojo
.body()["createTextRange"]){ // IE
412 if(element
.createTextRange
){
413 var r
= element
.createTextRange();
415 r
.moveStart("character", -99999); // move to 0
416 r
.moveStart("character", start
); // delta from 0 is the correct position
417 r
.moveEnd("character", stop
-start
);
420 }else if(_window
["getSelection"]){
421 if(element
.setSelectionRange
){
422 element
.setSelectionRange(start
, stop
);