Add attributes to quantity input to show numeric keyboard on mobile devices.

This commit adds both a `pattern` attribute to restrict user's input to numerical characters, and the forwards compatible `inputmode` attribute to hint at the keyboard layout to use. These attributes combined make sure that the numerical keyboard shows instead of the normal keyboard on most mobile devices (tested on the latest versions of Android and iOS).

Possible Caveats:
- Due to the nature of the numeric keyboard on iOS it is impossible to add a decimal point.

Further Reading:
https://stackoverflow.com/questions/6178556/iphone-numeric-keyboard-for-text-input
https://www.smashingmagazine.com/2015/05/form-inputs-browser-support-issue/
http://danielfriesen.name/blog/2013/09/19/input-type-number-and-ios-numeric-keypad/
This commit is contained in:
Jon Koops 2016-02-25 17:17:51 +01:00
parent 83d2f64e9e
commit 111b72c159
1 changed files with 1 additions and 1 deletions

View File

@ -21,5 +21,5 @@ if ( ! defined( 'ABSPATH' ) ) {
}
?>
<div class="quantity">
<input type="number" step="<?php echo esc_attr( $step ); ?>" min="<?php echo esc_attr( $min_value ); ?>" max="<?php echo esc_attr( $max_value ); ?>" name="<?php echo esc_attr( $input_name ); ?>" value="<?php echo esc_attr( $input_value ); ?>" title="<?php echo esc_attr_x( 'Qty', 'Product quantity input tooltip', 'woocommerce' ) ?>" class="input-text qty text" size="4" />
<input type="number" step="<?php echo esc_attr( $step ); ?>" min="<?php echo esc_attr( $min_value ); ?>" max="<?php echo esc_attr( $max_value ); ?>" name="<?php echo esc_attr( $input_name ); ?>" value="<?php echo esc_attr( $input_value ); ?>" title="<?php echo esc_attr_x( 'Qty', 'Product quantity input tooltip', 'woocommerce' ) ?>" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric" />
</div>