I am making a mobile HTML page that has an input field. When I tap the inside of the input field, the iOS 7 keyboard appears. But the keyboard has a top ribbon that contains "<", ">", and "Done" buttons, as this

How to get rid of this top ribbon on keyboard? I want to keyboard style same as for safari address bar input and the iOS7 "Messages" app. Thanks!

I am making a mobile HTML page that has an input field. When I tap the inside of the input field, the iOS 7 keyboard appears. But the keyboard has a top ribbon that contains "<", ">", and "Done" buttons, as this

How to get rid of this top ribbon on keyboard? I want to keyboard style same as for safari address bar input and the iOS7 "Messages" app. Thanks!

• javascript
• jquery
• html
• ios
• keyboard

• easy: just don't have any other inputs in the form. – dandavis Commented Nov 12, 2013 at 21:33
• But I have only one input box in on the page. I saw same keyboard style using safari when typing search on Google's search web page. – marsant Commented Nov 12, 2013 at 21:45
• the url type input should give you the same as the url bar <input type=url> – dandavis Commented Nov 12, 2013 at 22:00
• Tried type='url' but still get the same keyboard – marsant Commented Nov 13, 2013 at 0:14
• The awnser is very simple its not possible. Stackoverflow: stackoverflow./questions/9920952/… – KBeckers Commented Jan 20, 2014 at 15:27

3 Answers 3

its not possible due to the way iOS is designed,maybe in the future but for now we are stuck with this keyboard

As of iOS 9.3 this is not possible. (Unlike android) iOS is not open source so it's hard to prove but It's likely intentional because there is no other safe way to exit the keyboard. (Unlike android which has a back/close-keyboard button on swipe up or physically depending on the device). The following is a list of border cases that one might expect to hide the done bar if it were possible to do so;

• <span contenteditable="true"
• <input tabindex="-1"
• <input type="search"
• only one input tag on the page
• no form tag

To give the specified elements a tab index to control focus on iPhones by pressing the next/previous button on the iPhone keyboard, you can use the attr method with the 'tabindex' attribute using jQuery. Here's an example:

For Single input field:

jQuery(document).ready(function() {
    // Getting input filed using id
    jQuery('#input_field_1').attr('tabindex', 1);
});

For multiple input fields:

jQuery(document).ready(function() {
    jQuery('#input_field_1').attr('tabindex', 1);
    jQuery('#input_field_2').attr('tabindex', 2);
    jQuery('#input_field_3').attr('tabindex', 3);
    jQuery('#input_field_4').attr('tabindex', 4);
});