CODEWITHSUNDEEP
iostitaniumappcelerator
user1503606
user1503606

Reputation: 4300

Appcelerator Keyboard Toolbar Doesn't hide in the simulator

I am using Appcelerator and the keyboard toolbar doesnt hide in the simulator, which causes all sorts of issues if i have a button at the bottom of the screen, it just permantly stays at the bottom.

Here is a video of the issue. https://www.youtube.com/watch?v=RypzFJwSbtw&feature=youtu.be

Here is my code.

<TextField class="setupPin" id="pinOne" keyboardType="Ti.UI.KEYBOARD_TYPE_NUMBER_PAD" passwordMask="true" maxLength="4">
                <KeyboardToolbar>
                    <Toolbar>
                        <Items>
                            <Button onClick="closeToolbar">button 1</Button>
                            <FlexSpace/>
                            <Button onClick="submitToolbar">button 2</Button>
                        </Items>
                    </Toolbar>
                </KeyboardToolbar>
            </TextField>

Can someone suggest a fix driving me crazy?

Thanks

Upvotes: 0

Views: 659

Answers (2)

Prashant Saini
Prashant Saini

Reputation: 3539

I hope you already have implemented the function on button 1 click to blur the pinOne field like this:

function closeToolbar() {
    $.pinOne.blur();
}

Assuming above implementation, now it is not a problem of your code, neither it is a problem in simulator, but there is another piece of feature in ios simulators that you can toggle the simulators keyboard.

There's an option to toggle in keyboard in simulators. See this KEYBOARD SCREENSHOT.

Try toggling the keyboard after focusing on keyboard field, and make sure you have unchecked the Connect Hardware Keyboard option.

If Connect Hardware Keyboard is not checked, then you cannot use your physical keyboard to input, so to use physical keyboard and to hide the toolbar as well, play toggling Toggle Software Keyboard by keeping Connect Hardware Keyboard checked.

Upvotes: 0

Brenton House
Brenton House

Reputation: 144

Try something like this to hide the toobar/keyboard from the toolbar buttons. Add a comment if this doesn't work for you and I will look into it further.

https://gist.github.com/brentonhouse/2ffd923d41632d29bbd45c5516751d76

<Alloy>
   <TextField id="myTextField" width="Ti.UI.FILL" textAlign="Titanium.UI.TEXT_ALIGNMENT_RIGHT" keyboardType="Ti.UI.KEYBOARD_TYPE_DECIMAL_PAD" verticalAlign="Ti.UI.TEXT_VERTICAL_ALIGNMENT_CENTER" onFocus="showKeyboard">
      <KeyboardToolbar>
         <Toolbar>
            <Items>
               <Button systemButton="FLEXIBLE_SPACE" />
               <Button systemButton="DONE" onClick="hideKeyboard" textField="myTextField" />
            </Items>
         </Toolbar>
      </KeyboardToolbar>
   </TextField>
</Alloy>

var hideKeyboard = function(e) {
    var parent_name = e.source.textField;

    if(parent_name) {
        var parent = $[parent_name];
        parent.blur();
        parent.keyboardToolbar.visible = false;
    }

};

var showKeyboard = function(e) {
    e.source.keyboardToolbar.visible = true;
};

Upvotes: 1

Related Questions