TextBox: Difference between revisions

From NSB App Studio
Jump to navigation Jump to search
(Add javascript snippet)
 
(18 intermediate revisions by 4 users not shown)
Line 1: Line 1:
[[file:TextBox.jpg]]
[[file:TextBox.png]]


== Description ==
== Description ==
Line 7: Line 7:
While a variety of different events are available, the usual response to editing a TextBox is to call the function <buttonID>_onblur().
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.
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 on blur.


== Properties ==
To get rid of the white text shadowing when displaying on coloured backgrounds, put <code>text-shadow: none;</code> in the control's style property.
 
If you would like to do masked input, use 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.
 
To pass a date to a TextBox when the inputType property is set to Date, use the "YYYY-MM-DD" format.
 
== Properties and Methods ==


Standard [[properties and methods|properties]] are supported, plus:
Standard [[properties and methods|properties]] are supported, plus:
Line 20: Line 26:
| autocorrect || Spellcheck as entering? 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.
| clearButton || Display an "X" to clear the value in the button (if it has one).
|-
| focus() || Sets the focus to the TextBox. Runtime only.
|-
|-
| password || Text to be displayed in the field just as a comment – does not change the value.
| 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. IE11 and Firefox do not support the date type.
|-
| max || If inputType is numeric, the maximum allowed value. For date, the latest date in the format YYYY-MM-DD.
|-
| maxlength || Maximum number of input characters. Does not apply to numeric: use max instead.
|-
| min || If inputType is numeric, the minimum allowed value. For date, the earliest date in the format YYYY-MM-DD.
|-
|-
| placeholder || Text to be displayed in the field just as a comment – does not change the value.
| 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.
| readonly || If set to “True”, the control cannot be edited. At runtime, use readOnly.
|-
| required || If set to “True”, the field requires a value when the form is submitted. Design time only.
|-
| setSelectionRange(start, end) || Selects a range of characters. The first character starts at 0. Runtime only.
|-
|-
| size || Maximum characters allowed.
| size || Maximum characters allowed.
|-
| step || For numeric inputType: value must be a multiple of step. Use 1 for integer only.
|-  
|-  
| text || The contents of the TextBox. Same as value.
| text || The contents of the TextBox. Same as value.
Line 54: Line 74:
</pre>
</pre>


== Example (Basic) ==
== Example (JavaScript) ==
<pre>
<pre>
// TextBox Example
// TextBox Example
Line 63: Line 83:
</pre>
</pre>


== Output ==
== Setting a jQuery Mobile TextBox to Transparent ==
<pre>
TextBox1_wrapper.children[0].style.backgroundColor = "transparent"
 
// or
 
TextBox1_wrapper.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>


[[file:TextBoxOutput.jpg]]


[[Category:Language Reference]]
[[Category:Language Reference]]

Latest revision as of 18:24, 25 October 2016

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 on blur.

To get rid of the white text shadowing when displaying on coloured backgrounds, put text-shadow: none; in the control's style property.

If you would like to do masked input, use 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.

To pass a date to a TextBox when the inputType property is set to Date, use the "YYYY-MM-DD" format.

Properties and Methods

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.
clearButton Display an "X" to clear the value in the button (if it has one).
focus() Sets the focus to the TextBox. Runtime only.
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. IE11 and Firefox do not support the date type.
max If inputType is numeric, the maximum allowed value. For date, the latest date in the format YYYY-MM-DD.
maxlength Maximum number of input characters. Does not apply to numeric: use max instead.
min If inputType is numeric, the minimum allowed value. For date, the earliest date in the format YYYY-MM-DD.
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.
required If set to “True”, the field requires a value when the form is submitted. Design time only.
setSelectionRange(start, end) Selects a range of characters. The first character starts at 0. Runtime only.
size Maximum characters allowed.
step For numeric inputType: value must be a multiple of step. Use 1 for integer only.
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 (JavaScript)

// TextBox Example

Text1.onblur = function() {
  alert(Text1.value);
}

Setting a jQuery Mobile TextBox to Transparent

TextBox1_wrapper.children[0].style.backgroundColor = "transparent" 

// or

TextBox1_wrapper.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