marsant
marsant

Reputation: 1108

iOS keyboard without Prev, Next, Done button for HTML input field?

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

enter image description here

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!

Upvotes: 18

Views: 8291

Answers (3)

Zafer Faheem
Zafer Faheem

Reputation: 2014

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

Upvotes: -1

user1133275
user1133275

Reputation: 2735

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

Upvotes: 2

timo_pomer
timo_pomer

Reputation: 31

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

Upvotes: 2

Related Questions