Languages

Menu
Sites
Language
Back button and Done button not coming for my keypad

Hi,

     I created a web apps. There is a form in this apps. While clicking on textbox in form, keypad appears. But there is no back button and done button for keypad. How to implement it.

Edited by: Brock Boland on 17 Mar, 2014 Reason: Paragraph tags added automatically from tizen_format_fix module.
List

Responses

15 Replies
Lakshmi Grandhi
Hii , Can you please share the screenshot and also the code that opens your keypad ( like input field )
Alexander AVSukhov
Hi anfas ci, If you create Tizen Web UI Framework project, you can add data-add-back-btn="true" to page div:
and when the keypad is opened, the back button which is located in the footer is changed to the keypad hide button.
girish francis
Hi Alexander, This is not working for me. can you please share a sample working code. Here I also added sample code. this is not working

This is a single page boilerplate template that you can copy to build your first jQuery Mobile page.

Footer content

-->
Alexander AVSukhov
Hi girish francis, Try to create Tizen Web UI Framework project.
anfas ci
Please check the screenshots in this url. http://www.shareimage.ro/images/v4605q98y3x8fd9kqg0e.jpg
anfas ci
Hi Lakshmi Grandhi, http://www.shareimage.ro/images/v4605q98y3x8fd9kqg0e.jpg Above I shared the link for screen shot. Also here is the html. we cant able to set back and done button. We need keypad like one implemented in native calendar apps(http://www.shareimage.ro/images/2h23tiyysesng29clg5h.jpg). Please refer the code

Icon

Lakshmi Grandhi
I guess it's a popup window in the screenshot on which you have a form . so that is why you are not able to see it , framework is implemented for only page .
anfas ci
Hi Lakshmi Grandhi, I created a sample jquery mobile apps and added a textbox field to in index.html page and run the project. But the issue still exists. There is no popup in in this project. Here is the link for that screen shot(http://www.shareimage.ro/images/uu0b7fvdnnxm7hqevmrq.png).
Lakshmi Grandhi
Hi anfas, In case of jquery mobile apps adding this attribute to " data-add-back-btn="true"" doesn't wont. Its feature supported by tizen framework. You have add "data-icon=back" and you need to handle the functionality in javascript.
Lakshmi Grandhi
As Alexander AVSukhov said , you need to add data-add-back-btn="true" to <div data-role="page"> , then you'll see the keypad hide button
Lakshmi Grandhi
That is because according to tizen guidelines if the keypad is in use , Since the keypad covers the footer, the function required while the keypad is open cannot be seen (in this case "back" button) , so now you'll see the keypad hide button as there is back button in footer .
girish francis
BY Lakshmi Grandhi, Its not working as said by Alexander AVSukhov. I made a try with sample code.
Lakshmi Grandhi
Can you share that sample code here
Lakshmi Grandhi
Tizen Web IDE - Template - Tizen - Tizen Web UI Framework - Single-Page

Single-Page Application



Footer content

Lakshmi Grandhi
<body> <div data-role="page" id="main" data-add-back-btn="footer" data-footer-exist="true" class="main-class"> <div data-role="header"> <h1>Header</h1> </div> <div data-role="content" id="content1"> <inpu type="text" /> </div> <div data-role="footer" id="footer">Footer</div> </div> </body> Add this code to index.html ..