On my titanium app i have a form with many fields (textfield etc...), when i focus on textfield it shows the ios keyboard and i want to hide it when i click somewhere on the window :
<Alloy>
<Window id="home" >
<View id="form">
<Require type="view" id="myViewForm" src="form/etape_1" />
</View>
</Window>
</Alloy>
inside myViewForm :
<Alloy>
<View>
<TextField id="name" hintText="name"/>
<TextField id="telephone" hintText="Téléphone"/>
</View>
</Alloy>
Note : As you see i have a textfield with id "telephone" that will show only numbers.
on my controller home file :
/*-----------------------------------------
| | EVENT LISTENER CLICK ON WINDOW
-------------------------------------------*/
$.home.addEventListener("click", hideSoftKeyboard);
/*-----------------------------------------
| | HIDE KEYBOARD
-------------------------------------------*/
function hideSoftKeyboard(e){
if(Ti.Platform.osname === 'android'){
Ti.UI.Android.hideSoftKeyboard();
} else {
$.home.textField.blur();
}
}
On android it works well, but on Ios i have following error :
[ERROR] : Script Error {
[ERROR] : column = 103;
[ERROR] : line = 12;
[ERROR] : message = "undefined is not an object (evaluating '$.home.textField.blur')";
[ERROR] : stack = hideSoftKeyboard;
[ERROR] : }
Someone could help me please ? thank you.
Here is the code for you:
index.js
$.home.addEventListener("click", hideSoftKeyboard);
$.home.open();
function hideSoftKeyboard(e){
if(OS_ANDROID){
Ti.UI.Android.hideSoftKeyboard();
} else {
$.myViewForm.name.blur();
$.myViewForm.telephone.blur();
}
}
bubbleParent="false" on text-fields, then your click event on window will be fired up as soon as you click on text-field.Here is the complete cross-platform code to hide telephone keyboards.
index.js
$.home.open();
myViewForm.xml
<Alloy>
<View layout='vertical'>
<TextField id="MOBILE_FIELD" class="phone fields" platform="android" />
<TextField id="MOBILE_FIELD" class="phone fields" platform="ios">
<KeyboardToolbar>
<Toolbar>
<Items>
<FlexSpace />
<Button title="DONE" onClick="hideKeyboard" />
</Items>
</Toolbar>
</KeyboardToolbar>
</TextField>
</View>
</Alloy>
myViewForm.tss
// to accept only phone numbers, with + sign also..
".phone[platform=ios]" : {
keyboardType : Ti.UI.KEYBOARD_TYPE_NUMBER_PAD,
}
".phone[platform=android]" : {
inputType : [Ti.UI.INPUT_TYPE_CLASS_NUMBER]
}
".fields" : {
top : 30
width : '80%',
height : 50,
borderColor : 'black',
borderWidth : 2
}
myViewForm.js
function hideKeyboard() {
$.MOBILE_FIELD.blur();
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments