html input phone,HTML<input type=“number”>的最佳设置,适用于移动设备

根据@Alex Charters的建议,我提出了这个解决方案,使用jQuery,它看起来更快,更优雅。

将这段代码添加到页面的“onload”中

//shows numeric keypad on iOS mobile devices

if(getMobileOperatingSystem() === "iOS"){

$('input[type="number"]').attr("pattern", "\\d*");

}

/**

* Determine the mobile operating system.

* This function returns one of 'iOS', 'Android', 'Windows Phone', or 'unknown'.

*

* @returns {String}

*/

function getMobileOperatingSystem() {

var userAgent = navigator.userAgent || navigator.vendor || window.opera;

// Windows Phone must come first because its UA also contains "Android"

if (/windows phone/i.test(userAgent)) {

return "Windows Phone";

}

if (/android/i.test(userAgent)) {

return "Android";

}

// iOS detection from: http://stackoverflow.com/a/9039885/177710

if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {

return "iOS";

}

return "unknown";

}

我测试了一下,它符合三条规则。当操作系统是iOS时,它会添加

pattern

属性。默认情况下,我不会这样做,因为我意识到,根据输入的数量,这段代码需要一些时间来处理,因此它只是在假设使用iOS操作系统时运行。