<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>
IE11
関連するさくらインターネットの『よくある質問』
※ エキスパートモードで表示しています
アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
