TextBox: Difference between revisions
Line 66: | Line 66: | ||
<pre> | <pre> | ||
TextBox1_wrapper.children[0].style.backgroundColor = "transparent" | TextBox1_wrapper.children[0].style.backgroundColor = "transparent" | ||
</pre> | |||
== Getting KeyDown events in a jQuery Mobile TextBox Search == | |||
Since the Search button has some extra styling, it gets recreated after the app is loaded and before Sub Main() is run. This wipes out the definition you made of TextBox1_onkeypress. | |||
Here's the workaround: | |||
<pre> | |||
Sub Main() | |||
JavaScript | |||
// Create a call to mykeydown on when key pressed, after Search button is created. | |||
$("#TextBox1").keydown(function(){onmykeydown()}) | |||
End JavaScript | |||
End Sub | |||
Function onmykeydown() | |||
console.log("keydown") | |||
End Function | |||
</pre> | </pre> | ||
Revision as of 16:37, 8 January 2014
Description
The TextBox control is used to display a single line input area.
While a variety of different events are available, the usual response to editing a TextBox is to call the function <buttonID>_onblur().
To add a TextBox to your app, choose the TextBox icon in the Toolbar, then position it on the Design Screen. Use the Property Editor to set the properties you need. If necessary, add functions to your code to respond to the events that come from the TextBox: usually, just onblur.
If you would like to do masked input, using the jQuery Mobile version of this control and this: http://digitalbush.com/projects/masked-input-plugin/. Do not use it with input types such as Date and Time, which already have special formatting.
Properties
Standard properties are supported, plus:
autocapitalize | Automatically capitalize first letter? May not be available on other platforms. |
autocomplete | Automatically complete words? May not be available on other platforms. |
autocorrect | Spellcheck as entering? May not be available on other platforms. |
inputType | Specifies what kind of data will be input. Choices are color, date, datetime, email, file (iOS 6+ and Android 4+ only), hidden, month, number, password, range, search, tel, text, time and url. Default is text. |
placeholder | Text to be displayed in the field just as a comment – does not change the value. |
readonly | If set to “True”, the control cannot be edited. At runtime, use readOnly. |
size | Maximum characters allowed. |
text | The contents of the TextBox. Same as value. |
value | The contents of the TextBox. This is always returned as a string. Convert it to a number before doing arithmetic on it – see “Conversions”. |
Events
Standard events are supported, plus:
onblur | Called when exiting the field. |
onkeypress | Called when a key is pressed. |
Example (Basic)
Rem TextBox Example Function Text1_onblur() Msgbox Text1.value End Function
Example (JavsScript)
// TextBox Example Text1.onblur = function() { alert(Text1.value); }
Setting a jQuery Mobile TextBox to Transparent
TextBox1_wrapper.children[0].style.backgroundColor = "transparent"
Getting KeyDown events in a jQuery Mobile TextBox Search
Since the Search button has some extra styling, it gets recreated after the app is loaded and before Sub Main() is run. This wipes out the definition you made of TextBox1_onkeypress.
Here's the workaround:
Sub Main() JavaScript // Create a call to mykeydown on when key pressed, after Search button is created. $("#TextBox1").keydown(function(){onmykeydown()}) End JavaScript End Sub Function onmykeydown() console.log("keydown") End Function