INPUT type="number" の振る舞いをブラウザ間で調整する でテストした結果を元に、jQuery のプラグインを作成しました。 対応するに値するのは、Chrome と Firefox と IE11(10) だけです ブラウザは、Google Chrome と Firefox と IE だけです。さらに、Google Chrome のスピンボタンを非表示にする為に、INPUT 要素には id が必須となっています。その場合は、後から表示するような実装はしていません。IE の場合は、スピンボタンが最初から無いので、JQuery UI の spinner を使うようにしています。ただ、IE の入力チェックが type="number" に対して他のブラウザのように動作しないので、type="text" に変更した上で、pattern 属性でチェックさせている為、0〜9 の文字しか入らない実装になっています。 ※ IE9 以前で、autoNumber.js を実装するようにしました。 Opera と Safari for Windows をテストしました どちらも問題あるので、結局 IE9 以前と同じ対応になっています。 ( Safari for Windows は Apple で長い間バージョンアップされていません )
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$.fn.extend({
type_number: function(option){
// オプションが省略された場合の対応
option = option || {};
// INPUT 要素のみ対象
if ( $(this).prop("tagName").toUpperCase() != 'INPUT' ) {
return;
}
var userAgent = window.navigator.userAgent.toLowerCase();
var appVersion = window.navigator.appVersion.toLowerCase();
if ( userAgent.indexOf("msie") > -1 ) {
if (appVersion.indexOf("msie 10.0") > -1) {
// 'on' と 'jquery', で spinner を使う, それ以外はスピンボタン無し
if ( option.spin == 'on' || option.spin == 'jquery' ) {
$(this).spinner(option);
$(this).attr( "type", "text" );
$(this).attr( "pattern", "^[0-9]+$" );
}
else {
$(this).attr( "type", "text" );
$(this).attr( "pattern", "^[0-9]+$" );
}
}
else {
// IE9 以前で autoNumeric で数値以外を入力不可にする
var el = this;
var s = document.createElement("script");
s.src="http://winofsql.jp/jquery/plugins/number/autoNumeric.js";
if(s.addEventListener) {
s.addEventListener("load",callback,false);
}
else if(s.readyState) {
s.onreadystatechange = callback;
}
document.body.appendChild(s);
function callback() {
$(el).autoNumeric('init', {aSep:'',mDec:'0'});
}
if ( option.spin == 'on' || option.spin == 'jquery' ) {
$(this).spinner(option);
}
}
}
else {
if ( userAgent.indexOf("trident/7.0") > -1 ) {
// ※ IE11
// 'on' と 'jquery', で spinner を使う, それ以外はスピンボタン無し
if ( option.spin == 'on' || option.spin == 'jquery' ) {
$(this).spinner(option);
$(this).attr( "type", "text" );
$(this).attr( "pattern", "^[0-9]+$" );
}
else {
$(this).attr( "type", "text" );
$(this).attr( "pattern", "^[0-9]+$" );
}
}
else if (userAgent.indexOf("firefox") > -1) {
// 標準スピンボタンは 'on', spinner を使う場合は 'jquery', それ以外はスピンボタン無し
if ( option.spin != 'on' ) {
// spinner を使う
if ( option.spin == 'jquery' ) {
$(this).each(function(){
if ( $(this).prop("type").toUpperCase() == 'NUMBER' ) {
$(this).css({ "-moz-appearance": "textfield" });
$(this).spinner(option);
}
});
}
else {
$(this).css({ "-moz-appearance": "textfield" });
}
}
}
else if (userAgent.indexOf("opera") > -1) {
// スピンボタンが表示されますが、消す方法が見つからないので
// IE と同じく jQuery で対応したほうがよさそうです。また、
// FORM の送信で数字以外の文字のチェックがされないので、
// 数字のみ入力させるプラグインをさらに実装する必要があります
// ※ autoNumeric.js は type="text" でのみ有効です
$(this).attr( "type", "text" );
var el = this;
var s = document.createElement("script");
s.src="http://winofsql.jp/jquery/plugins/number/autoNumeric.js";
if(s.addEventListener) {
s.addEventListener("load",callback,false);
}
else if(s.readyState) {
s.onreadystatechange = callback;
}
document.body.appendChild(s);
function callback() {
$(el).autoNumeric('init', {aSep:'',mDec:'0'});
}
if ( option.spin == 'on' || option.spin == 'jquery' ) {
$(this).spinner(option);
}
}
else if (userAgent.indexOf("chrome") > -1) {
// 標準スピンボタンは 'on', spinner を使う場合は 'jquery', それ以外はスピンボタン無し
if ( option.spin != 'on' ) {
// spinner を使う
if ( option.spin == 'jquery' ) {
$(this).each(function(){
if ( $(this).prop("type").toUpperCase() == 'NUMBER' ) {
$('head').append('<style>#'+$(this).attr('id')+'::-webkit-outer-spin-button,#'+$(this).attr('id')+'::-webkit-inner-spin-button{-webkit-appearance:none;}</style>');
$(this).spinner(option);
}
});
}
// スピンボタンを非表示にする為に、スタイル要素を追加
// ( id があるという前提と、後から表示に切り替える事は考えていない )
else {
$(this).each(function(){
if ( $(this).prop("type").toUpperCase() == 'NUMBER' ) {
$('head').append('<style>#'+$(this).attr('id')+'::-webkit-outer-spin-button,#'+$(this).attr('id')+'::-webkit-inner-spin-button{-webkit-appearance:none;}</style>');
}
});
}
}
}
else if (userAgent.indexOf("safari") > -1) {
// Google Chrome の劣化版でした。そもそも最近に
// バージョンアップされていない気がします。コード
// 自体は Google Chrome と同じで見た目は同様の
// 結果になりますが、FORM の送信で数字以外の文字
// のチェックがされないので、数字のみ入力させる
// プラグインをさらに実装する必要がありますが、
// autoNumeric.js は type="text" でのみ有効なの
// で、Opera と同じコードになります
$(this).attr( "type", "text" );
var el = this;
var s = document.createElement("script");
s.src="http://winofsql.jp/jquery/plugins/number/autoNumeric.js";
if(s.addEventListener) {
s.addEventListener("load",callback,false);
}
else if(s.readyState) {
s.onreadystatechange = callback;
}
document.body.appendChild(s);
function callback() {
$(el).autoNumeric('init', {aSep:'',mDec:'0'});
}
if ( option.spin == 'on' || option.spin == 'jquery' ) {
$(this).spinner(option);
}
}
else {
}
}
}
});
$(function(){
$("#num1").type_number( { spin: "off" } );
$("#num2").type_number( { spin: "on" } );
$("#num3").type_number( { spin: "jquery" } );
});
</script>
<style type="text/css">
* {
font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック";
font-size: 16px;
}
</style>
<form
method="get"
id="target_form"
target="my_ferame"
action="http://winofsql.jp/php_get.php"
accept-charset="utf-8">
<pre>
<input
id="send_check"
class="num"
type="submit"
name="send"
value="送信">
▼ type="number" でスピンボタンなし
<input
id="num1"
class="num"
type="number"
name="num[]">
▼ type="number" でスピンボタンあり
<input
id="num2"
class="num"
type="number"
id="ie9" name="num[]">
▼ jQuery spinner
<input
id="num3"
class="num"
type="number"
id="ie9" name="num[]">
</pre>
</form>
<iframe name="my_ferame" frameborder="1" scrolling="yes" width="400" height="200"></iframe>
以下の３種類の実行でそれぞれの表現が変化します。( spinner へのオプションが必要な場合は、追加で設定します。
$(function(){
$("#num1").type_number( { spin: "off" } );
$("#num2").type_number( { spin: "on" } );
$("#num3").type_number( { spin: "jquery" } );
});
|
|
【プラグイン作成(jQuery)の最新記事】
- jQuery の回転アニメーション / $({kakudo: 0}).animate(properties, options )
- HTML 上のデータをローカルに保存する jQuery プラグイン
- jQuery のプラグインで動的なコントロールの処理を作成 : add_button / set_event / set_link
- TD 内のテキストを入力可能にする tableinput.js / jQuery プラグイン
- スマホとPC で別の処理を記述できる jQuery のストリートビュープラグイン
- jQuery のプラグインとしてストリートビューを利用する
- jQuery の簡単なプラグインを $.fn.extend で作成( 0〜9のみ入力可能なフィールド )
- jQuery のプラグイン作成 : 要素のクリックイベントで、画像の実際の縦横サイズちょうどの大きさのウインドウを開いて表示する
- jQuery の回転アニメーションでくるくる回る『実行中アイコン』
- jQuery を使ったCSS 一括エフェクトアニメーション( rotate, skew, borderRadius, boxShadow )
- jQuery : IFRAME 作成プラグインと、アニメーションによる表示切替
- jQuery でかなり実用的かもしれない入力制限( 入力値復帰型 )
- jQuery で、指定文字集合のみ入力可能なプラグイン
- jQuery の fn.extend メソッドと extend メソッド の違いは $(セレクタ) のメソッドとして実行できるかどうか ( extend の仕様について )
