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:
parent
83d2f64e9e
commit
111b72c159
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue