Hide keyboard on ios titanium

Question

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.

Prashant Saini Prashant Saini · Accepted Answer · 2016-06-11T10:37:07

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();
    }
}

But also remember that if you do not set bubbleParent="false" on text-fields, then your click event on window will be fired up as soon as you click on text-field.
So be careful about using click event on whole window.
If your purpose of using click event on window is just to hide keyboard on iOS using phone layout keyboard, then I will suggest you to look this property TextField keyboardToolbar which will serve your purpose well.

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();
}

Hide keyboard on ios titanium

2 Answers