javascriptで相対パスを絶対パス(url)に変換する

● jquery使用

function convertPathUrl( src ){
    return $("<a>").attr("href", src).get(0).href;
}
No.2118
12/23 08:53

edit

jQuery Select2 の css 表示設定

● Select2のドロップダウンの文字サイズを変更する

.select2 {
    font-size: 12px;
}
.select2-results__option {
    font-size: 12px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
   line-height: 1.5 !important;
}

● Select2のボックスの高さを変更する (すべての select2 の高さを変更)

.select2-selection__rendered {
    line-height: 28px !important;
}
.select2-container .select2-selection--single {
    height: 32px !important;
}
.select2-selection__arrow {
    height: 31px !important;
}

● Select2のボックスの高さを変更する (指定したselect2 の高さを変更)

#my-select+.select2-selection__rendered {
    line-height: 25px !important;
}
#my-select+.select2-container .select2-selection--single {
    height: 29px !important;
}
#my-select+.select2-selection__arrow {
    height: 28px !important;
}

● Select2のドロップダウンのリストの高さを変更する

.select2-results , .select2-results__options {
    max-height: 500px !important;
    height: 500px !important;
}

● Select2のドロップダウンリストの好きな位置にhtmlタグを設定する

function formatState (state) {
  if (!state.id) {
    return state.text;
  }
  var baseUrl = "/user/pages/images/flags";
  var $state = $(
    '<span><img src="' + baseUrl + '/' + state.element.value.toLowerCase() + '.png" class="img-flag" /> ' + state.text + '</span>'
  );
  return $state;
};

$(".js-example-templating").select2({
  templateResult: formatState
});
No.2015
08/04 09:47

edit

jquery で 全角を2文字 半角を1文字 として文字数を計算する。 指定した文字数で切り詰める

● 全角を2文字 半角を1文字 として文字数を計算する

            /**
             * 全角を2文字 半角を1文字 として文字数を計算する
             */
            textLength = function(text) {
                // return text.length;
                var regexp = /[\x01-\x7E\u{FF65}-\u{FF9F}]/mu;

                var len = 0;
                for(var i = 0; i < text.length; i++){
                var ch = text[i];
                len += regexp.test(new String(ch)) ? 1 : 2;
                }
                return len;
            } ,
No.1996
05/14 09:54

edit

jQueryで特定のタグのみ削除する unwrap()

● jQueryで特定のタグのみ削除する

元の要素

<div>
   <p class="active"><a href="#">子要素のaタグのみ削除したい</a></p>
</div>

削除コマンド unwrap()

unwrap() は指定要素を囲むタグを削除する事ができるメソッドです。

  // 子要素のタグのみ削除
  $('.active').children().contents().unwrap();

削除後

<div>
  <p class="active">子要素のaタグのみ削除したい</p>
</div>

● unwrap()の例1.

<div>
	<div>
		<div>
			<span id="hoge">アイウエオ</span>			
		</div>
	</div>
</div>

   ↓ unwrap() を1回実行すると

	$('#hoge').unwrap();

   ↓ こうなります

<div>
	<div>
		<span id="hoge">アイウエオ</span>			
	</div>
</div>

● unwrap()の例2. DIV タグを削除して BR タグにします。

元のhtml

<div id="test">
	<div>
		<span style="color:red;">1行目のテスト</span>
	</div>
	<div>
		2行目のテスト
	</div>
</div>

unwrap() 実行

	$('#test').find('div').each(function(index, element){
		$(element).contents().unwrap().append('<br>');
	});

実行後のhtml

<div id="test">
		<span style="color:red;">1行目のテスト<br></span>
		2行目のテスト
</div>
No.1986
04/23 18:17

edit

No.1984
04/09 21:49

edit

全ての列が空のテーブル列を非表示にする

● 全ての列が空のテーブル列を非表示にする

テーブルが複数あっても動作します。

<script>
$('table').each(function(index,element) {
    $(element).find('th').each(function(i) {
        var remove = 0;

        var tds = $(this).parents('table').find('tr td:nth-child(' + (i + 1) + ')')
        tds.each(function(j) { 
            // console.log( this.innerText );
            if (this.innerText == ''){
                remove++; 
                console.log( 'remove!' );
            } 
        });

        // console.log( remove, ($(element).find('tr').length - 1) );

        if (remove == ($(element).find('tr').length - 1)) {
            $(this).hide();
            tds.hide();
        }
    });
});
</script>

https://bit.ly/37wHbz0

No.1887
10/22 18:09

edit

jQueryでフォームに変更があったかどうかを調べる

● jQuery Dirty

https://www.jqueryscript.net/form/alert-form-changed-dirty.html

こちらを実行して監視を開始します

    $(function() {
        $("#input-form").dirty({
            preventLeaving: true,
            leavingMessage: 'NO SAVE',
            onDirty: function(){
                alert("フォームが変更されています。ページを離れますか?")
            }
        });
    });

他にも便利なメソッドがあります

// detects if a form has been modified
// returns true or false
$("#form").dirty("isDirty");

// detects if a form is Clean
// returns true or false
$("#form").dirty("isClean");

// refreshes events
$("#form").dirty("refreshEvents");

// resets the form
$("#form").dirty("resetForm");

// sets the state to Clean
$("#form").dirty("setAsClean"); 

// shows modified form fields
$("#form").dirty("showDirtyFields");

● jQuery Dirtyと iCheckとの共存

iCheckではチェックボックスやラジオボタンをクリックしたときに ifClicked() イベントが走るのでその中で、onchange() イベントを発火してやればOKです。

<script type="text/javascript">
$(function() {
    // 1. iCheckの初期化
    $('input[type=checkbox],input[type=radio]').iCheck({});

    // 2. iCheckクリック時に onchange() イベント発火する
    $('input[type=checkbox],input[type=radio]').on('ifClicked', function(event) {
        setTimeout(() => {
            $(this).change();
        }, 10);
    });
})
</script>
No.1855
02/18 16:17

edit

jQueryで prop を使ってチェックボックスなどの値を変更した時に on change イベントを発火させる

● jQueryで prop を使ってチェックボックスなどの値を変更した時に on change イベントを発火させる

$(this).attr("checked", "checked");

         ↓

$(this).attr("checked", "checked").change();

change() メソッドを加えます。 これだけでOK!

No.1854
09/11 09:54

edit

jQueryでdata属性を扱う

● jQueryでdata属性を扱う

● jQueryでdata属性を扱う方法

・data属性の取得

jQueryでdata-keyword属性を取得します。

$('#hoge').attr('data-keyword');

・data属性のセット

jQueryでdata-keyword属性を設定します。

$('#hoge').attr('data-keyword', 'テストテスト');

● $('.hoge').data() は使用しない事

$('.hoge').data()を使用すると次のような問題点に出会うことになります。

・htmlに 反映されない。
・jQueryの キャッシュ問題に悩まされる
No.1609
10/25 10:13

edit

checkbox で 1つだけチェックをつけれるようにする。(もちろんチェックをなくせるようにもする)

● html

<input name="sold_flag" type="hidden" value="0">
<label>
    <input class="" checked="checked" name="sold_flag" type="checkbox" value="1">
    売約済み
</label>
<label>
    <input class="" name="sold_flag" type="checkbox" value="9">
    商談中
</label>

● javascript

            $("[name='sold_flag']").on("click", function(){
                if ($(this).prop('checked')){
                    $("[name='sold_flag']").prop('checked', false);
                    $(this).prop('checked', true);
                }
            });
No.1600
10/09 11:45

edit

jQuery で スマホ / PC を判別する( is_mobile , detect mobile 的なやつ)

● jQuery で スマホ / PC を判別する

if (window.matchMedia("(max-width: 767px)").matches) {
    console.log( "モバイルです" );
} else {
    console.log( "PCです" );
}
No.1583
09/05 16:36

edit

No.1578
09/04 22:19

edit

JavaScript で カレンダー、時刻、日付を入力させるフォーム

● カレンダーで日付と時刻を入力させる jquery プラグイン

https://xdsoft.net/jqplugins/datetimepicker/

No.1530
11/08 16:05

edit

jQuery で 登録されている onclick等のイベントを表示 / 追加 / 削除

● jQuery で現在登録されている onclick等のイベントを表示

class=menu のオブジェクトのイベントを表示します。

console.log( '===== .menu_base__mypage のイベント =====' );
console.log( jQuery._data($(".menu").get(0)).events );
console.log( '===== .menu_base__mypage のイベント =====' );

● jQuery で現在登録されている onclick等のイベントを削除

class=menu のオブジェクトのクリックイベントを削除します。

$('.menu').unbind('click');

● jQuery で onclick等のイベントを追加

class=menu のオブジェクトへクリックイベントを追加します。

$('.menu_base__mypage').bind( "click", function() {
    alert('new event !!!');
});
No.1458
03/12 09:24

edit

jQueryのマルチセレクト系プラグイン

● jQueryのマルチセレクト系プラグイン

オススメは https://select2.org/getting-started/basic-usage

● 他にはこちらで紹介されています。

https://www.jqueryscript.net/blog/Best-Multiple-Select-jQuery-Plugins.html
https://bit.ly/3jcCb8n

No.1451
06/24 09:54

edit

フォーム入力時に 「Command ( Control )」+「Enter」のショートカットキーでフォーム送信をする

● jquery-textarea-form-submit-cmd-enter.js

A. 「Command ( Control 」+「Enter」のショートカットキーで、フォーカスが当たっているフォーム部品の親フォーム送信をする

 $(function() {
     $(document).on('keydown', 'body', function(e) {
		if ( !(e.key == 'Enter' && (e.metaKey == true || e.ctrlKey == true ) ) ) return;

         var $target = $(e.target);
         if ($target.is('input') || $target.is('textarea') || $target.is('select')) {
             $target.closest('form').trigger("submit");
         }
     });
 });

B. 「Command ( Control 」+「Enter」のショートカットキーで、 class="notrepeat" をクリックさせる

 $(function() {
     $(document).on('keydown', 'body', function(e) {
		if ( !(e.key == 'Enter' && (e.metaKey == true || e.ctrlKey == true ) ) ) return;

         var $target = $(e.target);
         if ($target.is('input') || $target.is('textarea') || $target.is('select')) {
          $target.closest('form').find('.notrepeat').trigger("click");
         }
     });
 });
No.1395
06/28 12:21

edit

● jQuery でのフォーム操作

● フォームの種類を判別する( 例 : checkbox か radioか)

alert( $('#hoge').prop('type') );

● タグ名からフォームの種類を判別する( 例 : <SELECT name="yoyaku"> を判別 )

if ( $("[name='yoyaku']").prop("tagName") == 'SELECT' ){
//処理
}

● name="xxxx" の部分一致

前方一致

$("[name^='yoyaku']")

yoyaku_01 , yoyaku_02 などにマッチします。

後方一致

$("[name$='_01']")

name="data_01" や name="hoge_01" などにマッチします。

部分一致

$("[name*='at']")

name="created_at" や name="atmark" などにマッチします。

● 1行テキストエリア(id="hoge")の値を取得する

<input type="text" name="hoge" id="hoge" value="999" >
//  jQuery
var v = $('#hoge').val();
// JavaScriptのみ
var v = document.getElementById('hoge').value;

● 1行テキストエリア(id="hoge")へ値('test_string')をセットする

//  jQuery
$('#hoge').val('test_string');

● ドロップダウンリストの(id="hoge")の値を取得する

var v = $('#hoge').val();

● ドロップダウンリストの選択された option のテキストを取得する

  var select_obj = $("[name='school_id']");
  var selected_option_text = select_obj.children(':selected').text();

● ドロップダウンリスト の選択状態を変更する

currency_unit 設定した値を持つドロップダウンリストを選択状態にします

$('.hoge').val(currency_unit);

● ラジオボタンの値の取得

var data = $("input:radio[name='my_radio']:checked").val();

● ラジオボタンのチェックを外して未選択にする

$( "[name='my_radio']" ).prop('checked', false);

// ↑ これで動かない場合は attr を使用する
$( "[name='my_radio']" ).attr('checked', false);

● 単一チェックボックス(id=cb1)の値の取得

<input type="checkbox" id="cb1_id" name="cb1" value="あいうえお">あいうえお
var v = $('#cb1_id:checked').val();      // IDでアクセスする場合
var v = $("input[name='cb1']:checked").val();     // nameでアクセスする場合
alert(v);

● checkboxにチェックがついているかどうかを調べる

true ,false が帰ってきます。

var flag = $("[name=checkbox1]").prop("checked");

● checkboxにjQueryでチェックをつける

<input type="checkbox" id="cb1_id" name="cb1" value="あいうえお">
// name が「cb1」 valueが「あいうえお」のチェックボックスにチェックを付ける
$('input[type="checkbox"][name="cb1"][value="あいうえお"]').prop("checked",true);

// 全てのチェックボックのチェックを外す
$("input:checbox").attr('checked', false);

● 「全てを選択する」ボタンを押すと全てのチェックボックスのチェックを付ける

id="all_check_on”な要素をクリックするとname = ”user_id[]" のチェックボックス全てにチェックをつける(または解除)します
html

<label><input type="checkbox" id="all_check_on">全て選択する</label>
<input type="checkbox" name="user_id[]" value="1">
<input type="checkbox" name="user_id[]" value="2">
<input type="checkbox" name="user_id[]" value="3">

js

$("#all_check_on").click(function() {
    if ($(this).prop("checked")) {
        $('[name="user_id[]"]').prop("checked", true);
    } else {
        $('[name="user_id[]"]').prop("checked", false);
    }
});

● チェックされている複数チェックボックスの値をURLパラメーターの形式で取得する

name = ”user_id[]" のチェックされている全てのチェックボックスの値をURLに渡せる形式で取得します。 js

param = $('[name="user_id[]"]:checked').map(function(){
	return this.name + '=' + $(this).val();
}).get().join('&');

console.log( param );

表示結果

user_id[]=1&user_id[]=2

● フォームをサブミットする

<form id="FM"></form>
 $('#FM').submit();

● (id="input_button")の送信ボタンを押せないようにする

$('#input_button').prop('disabled', true); // 押せない
$('#input_button').prop('disabled', false); // 押せる

● ドロップダウンリスト(class="my_list")を選択できないようにする

$('.my_list').prop('disabled', true); // 押せない
$('.my_list').prop('disabled', false); // 押せる

● フォーム要素一括セレクタ

$(":input")		// 全てのフォーム要素
$(":button")	// 全てのボタン要素

$(":text")		// テキストボックス
$(":password")	// パスワード入力ボックス
$(":radio")		// ラジオボタン
$(":checkbox")	// チェックボックス
$(":file")		// ファイル選択ボックス
$(":submit")	// 送信ボタン
$(":image")		// 画像ボタン
$(":reset")		// リセットボタン

例:全てのフォーム要素にアクセスする

$(":input").each(function(index, el) {
    console.log(el.name);
});

● セレクトボックス(ドロップダウンリスト)が変更されたら実行

<script type="text/javascript">
$(document).ready(function() {
	$("[name='mt_payment_id']").change(function() {
		console.log( '変更されました' );
	});	
});
</script>
No.666
03/29 11:10

edit

prototype.js
jQuery
フォーム

JavaScript(jquery)でドロップダウンリストの絞り込みを行う

ドロップダウンリストの項目があまりに置いときにテキスト入れを用意しておいて絞り込み検索を行いたいと言った時があります。 その時は以下の様にすればいいでしょう

● JavaScriptでドロップダウンリストの絞り込みを行うのデモ

JavaScript(jquery)でドロップダウンリストの絞り込みを行うのデモ

● コード

・ html

<select name="" id="user_list_men" style="margin-bottom: 5px;">
<option value="">===選択してください===</option>
<option value="Craig Ball">Craig Ball</option>
<option value="Barney Bigard">Barney Bigard</option>
<option value="Don Byron">Don Byron</option>
<option value="Evan Christopher">Evan Christopher</option>
</select>
<input type="text" id="user_list_search_men">絞込検索欄

・ JavaScript


class ListChanger {
    constructor(idName) {
        this.selectBox = document.getElementById(idName);
    }
    change(value) {
        const items = this.selectBox.children;
        const reg = new RegExp(".*" + value + ".*", "i");

        let i;

        if ( value === ''){
	        for ( i = 0 ; i < items.length; i++) {
                items[i].style.display = "";
	        }
        	return;
        }

        for ( i = 0 ; i < items.length; i++) {
            if (items[i].textContent.match(reg)) {
                items[i].style.display = "";
            } else {
                items[i].style.display = "none";
            }
            items[i].selected = false;
        }
        // 選択状態にする
        for (i = 0; i < this.selectBox.length; i++) {
            if (this.selectBox[i].textContent.match(reg)) {
                this.selectBox[i].selected = true;
                break;
            }
        }
    }
}

const menObj = new ListChanger('user_list_men');
$("#user_list_search_men").on('input keyup  blur',function() {
    menObj.change(this.value);
});
No.1158
12/15 15:15

edit

jqueryのイベント一覧

● jqueryのイベント(ユーザー操作イベント)

イベント名 説明
click 指定要素上で左クリック時に発火
dblclick 指定要素上でダブルクリック時に発火(clickも発火)
contextmenu 指定要素上でマウス右ボタンを押した時に発火
mousedown 指定要素上で左or右ボタンを押した時に発火
mouseup 指定要素上で左or右ボタンを離した時に発火
mousemove 指定要素上でマウスカーソルが動いた時に発火
mouseover / mouseenter 指定要素上にマウスカーソルが入った時に発火
mouseout / mouseleave 指定要素上からマウスカーソルが離れた時に発火
keydown / keypress キーを押した瞬間に発火
keyup キーを離した瞬間に発火

● jqueryのイベント(要素イベント)

イベント名 説明
focus / focusin 要素にフォーカスが当たった時に発火
blur / focusout 要素からフォーカスが外れた時に発火
change 要素の内容が変更された時に発火(1行テキストや複数行テキストの場合変更がありかつフォーカスが外れた瞬間)
select inputやtextareaのテキストを選択した時に発火
submit フォームが送信された時に発火

● jqueryのイベント(その他イベント)

イベント名 説明
scroll 画面がスクロールした時に発火
resize ウィンドウのサイズが変更された時に発火
ready HTMLが読み込まれた時に発火
unload 別のページに遷移する時に発火
load データの読み込みが完了した時に発火
error データの読み込みに失敗した時に発火
No.1142
12/15 15:46

edit

フォーム
jQuery

コンパクトなサイズで設置簡単な(alert・モーダル)ウィンドウ jquery プラグイン

コンパクトなサイズで設置簡単な(alert・モーダル)ウィンドウ jquery プラグイン

● jquery.alertable.js - Minimal alert, confirm, and prompt replacements.

https://github.com/claviska/jquery-alertable

・デモ

http://www.jqueryscript.net/demo/Nice-Clean-jQuery-Alert-Confirm-Dialog-Plugin-alertable-js/

・設置方法

<script src="assets/js/jquery.alertable.min.js"></script>
<link  href="assets/js/jquery.alertable.css" rel="stylesheet">
$.alertable.alert('Howdy!');

これだけです。とても簡単ですね。

No.1130
09/04 22:21

edit

jQuery

jQueryでフォームの入力途中で画面遷移しようとするとアラートを出して注意する

● jQueryでフォームの入力途中で画面遷移しようとするとアラートを出す例

● フォーム例

<form action="test.php" name="MYNAME">
	<input type="text" name="input1">
	<textarea name="input2"></textarea>
</form> 

● JavaScript

$(function(){
var form_change_flg = false;
    $(window).on('beforeunload', function() {
        if (form_change_flg) {
          return "入力画面を閉じようとしています。入力中の情報がありますがよろしいですか?";
        }
    });
    //フォームの内容が変更されたらフラグを立てる
    $('form[name=MYNAME] input[name=title1]').change(function() {
        form_change_flg = true;
    });
    $('form[name=MYNAME] textarea[name=input2]').change(function() {
        form_change_flg = true;
    });
    // フォーム送信時はアラートOFF
    $('form[name=MYNAME]').submit(function(){
        form_change_flg = false;
    });
});

No.1092
12/15 15:16

edit

フォーム
jQuery

No.1082
12/15 15:17

edit

jQuery
フォーム

jQueryプラグインのひな形

jQueryプラグインを作成するためのひな形はネットで調べるといくつかパターンが出てきますが、例えばこういうのはどうでしょうか。

;(function($){

$.fn.myPlugin = function(options) {

     'use strict';

    if (this.length === 0){
    	var error_css  = 'background: #ff0000; color: #FFF; padding: 2px; line-height: 1.5;';
    	console.log('%cERROR( jquery.myPlugin.js ) :DOM Object not found', error_css);
    	return this;
    }

    // private variables
    var priOne = '';
    var priTwo = '';

    // private methods
    var foo = function() {
    };

    // public variables
    this.pubOne = 0;

    // public methods
    this.initialize = function() {
		return this.each(function(i, elem) {
			// ...
    	});
    };

    return this.initialize();
};
})(jQuery);

有名なテンプレートとしては jquery boilerplate があります

● jquery boilerplate

https://jqueryboilerplate.com/

No.1040
12/15 15:18

edit

jQuery

jqueryの fadeIn / fadeOut メソッドを CSS3アニメーションにする

jqueryの fadeIn / fadeOut メソッドを CSS3(animation)アニメーションにするには以下のようにします。

デモ : http://logic.moo.jp/livedemo/jquery.fadecss3/demo.html

<link rel="stylesheet" href="jquery.fadecss3.css">
<script type="text/javascript" src="jquery.fadecss3.js"></script>
$('#item').fadeInCss3();
$('#item').fadeOutCss3();

$('#item').fadeInCss3(1000, 'ease-in');
$('#item').fadeOutCss3(3500, 'ease-in-out');

jquery.fadecss3.css として保存

@keyframes fadein_css3_kf {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@-webkit-keyframes fadein_css3_kf{
	0% {opacity:0;}
	100% {opacity:1;}
}
@keyframes fadeout_css3_kf {
  0% {opacity: 1;}
  100% {opacity: 0; visibility: hidden; }
}
@-webkit-keyframes fadeout_css3_kf{
	0% {opacity:1;}
	100% {opacity:0; visibility: hidden;}

jquery.fadecss3.js として保存

$.fn.fadeInCss3 = function(duration, easing) {
  var event_alias = "animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd";
  if (! duration){duration=400;}
  if (! easing){easing='linear';}
  var _this = this;
  setTimeout(function() {
    return $(_this).show().css({
        'animation'                 : 'fadein_css3_kf 400ms linear 0s 1 normal' ,
        'animation-duration'        : duration + 'ms' ,
        'animation-timing-function' : easing ,
        'animation-fill-mode'       : 'forwards' ,
        'visibility'                : 'visible'
    }).on(event_alias, function(){
      $(this).off(event_alias);
      $(this).css({
        'visibility' : 'visible' ,
        'animation'  : 'none'
      });
    });
  }, 0);
};

$.fn.fadeOutCss3 = function(duration, easing) {
  var event_alias = "animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd";
  if (! duration){duration=400;}
  if (! easing){easing='linear';}
  $(this).each(function(){
    if( $(this).filter(':not(:hidden)').length ){
      $(this).show().css({
          'animation'                 : 'fadeout_css3_kf 400ms linear 0s 1 normal' ,
          'animation-duration'        : duration + 'ms' ,
          'animation-timing-function' : easing ,
          'animation-fill-mode'       : 'forwards' ,
          'visibility'                : 'visible'
      }).on(event_alias, function(){
        $(this).off(event_alias);
        $(this).css({
          'visibility' : 'hidden' ,
          'animation'  : 'none' ,
          'display'    : 'none'
        });
      });
    }
  });
  return $(this);
};

ただ現時点では CSSアニメーションはjQuery本体のanimate()よりは早いものの、Velocity.js には劣るようです。 参考 : http://bit.ly/1QnSfRn

No.1006
12/15 15:47

edit

css
アニメーション
高速化

jQueryを使ってCSS3アニメーションを操作する。【jquery.transit】

■ jquery.transit · GitHub

https://github.com/rstacruz/jquery.transit#readme

jQueryを使いますが、アニメーション自体はCSS3アニメーションなのでスマホでも軽いです。 例:(フェードインの例)

<div id="test" style="border:1px solid red;">テストです</div>
$('#test').transition({ opacity: 0.0, scale: 0.5 }, 0);
$('#test').transition({
  opacity : 1.0,
  scale   : 1.0 ,
  duration: 5000,
  complete: function() {
    alert("CSS3 animation complete!");
  }
});
No.988
12/15 15:26

edit

jQuery
css
アニメーション

JavaScript(jQuery) で郵便番号から住所を自動入力する2つのライブラリ

● 1.【 jQueryプラグイン jquery.jpostal.js】

設置が簡単なのでおすすめです。住所データも自動更新。
https://github.com/ninton/jquery.jpostal.js

ライブラリの読み込み

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.jpostal.js"></script>

スクリプトの実行(郵便番号を入力すると自動でフォームに住所を入力)

$('#postcode1').jpostal({
	postcode : [
		'#postcode1', // 郵便番号 前3桁
		'#postcode2' // 郵便番号 後4桁
	],
	address : {
		'#address1'  : '%3', // 都道府県
		'#address2'  : '%4', //住所1
		'#address3'  : '%5' // 住所2
	}
});

です。とても簡単ですね。

HTMLは次のように準備します。

郵便番号 : <input type="text" name="postcode1" id="postcode1" > - <input type="text" name="postcode2" id="postcode2" > 

都道府県 : <input type="text" name="address1" id="address1" > 
住所1 : <input type="text" name="address2" id="address2" > 
住所2 : <input type="text" name="address3" id="address3" > 

● 「郵便番号から住所を自動で入力」ボタンを設置して、ボタン押した時に住所を自動で入力する

「郵便番号から住所を自動で入力」ボタンを設置して、ボタン押した時に住所を自動で入力するには、

<button id="btn_post" type="button">郵便番号から住所を自動入力</button>

というボタンを設置して

  $(document).ready(function() {
    $('#btn_post').jpostal({
      click : '#btn_post',
      postcode : [
        '#zip_code'
      ],
      address : {
        '#prefecture_name': '%3',
        '#addr_name'    : '%4%5'
      }
    });
  });

という風に呼び出します。


● 郵便番号が入力されたときに自動的に全角から半角へ変換する

moji.js を使用して次のようにします。

・moji.js

https://github.com/niwaringo/moji

<script src="./js/moji.js"></script>
<script type="text/javascript">
 $("#zip_code").keyup(function(){
    var str = $(this).val();
    var han = moji(str).convert("ZEtoHE").toString();
    $(this).val(han);
  });
</script>


● 2. 【ajaxzip3】

郵便番号から住所を自動入力するには住所データ自動更新してくれる ajaxzip3 も簡単便利です。
https://github.com/ajaxzip3/ajaxzip3.github.io

ライブラリの読み込み

<script src="http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js" charset="UTF-8"></script>

郵便番号入力欄に追加

正規表現で郵便番号が7桁入力された時に検索を実行するようにします。 【name=zipcode】のテキストエリアに7桁の郵便番号を入力すると 【name=prefecture】のドロップダウンリスト 【name=address】の1行テキストに住所が反映されます。 ■ HTMLの1行テキストを下記のように修正

<input name="zipcode" type="text" />
↓
<input name="zipcode" type="text" onkeyup="check_zip(this);" />

■ HTMLの<head>タグ内に下記を追加(.js ファイルにして外に出してもok)

<script>
var postal_name = '';
function check_zip( _this ){
    if ( postal_name != _this.value ){
        AjaxZip3.zip2addr( '_this', 'prefecture', 'address' );
        postal_name = _this.value;
    }
}
</script>

これだけです。

No.870
02/27 10:13

edit

jQuery
フォーム

DOMオブジェクト・jQueryオブジェクト をダンプ(テキスト表示)する。

デバッグ時には必ず出くわすのですが、jQueryオブジェクトやDOMオブジェクトの中身を見たい!という時があります。

・Safari、Chrome, Firefox でオブジェクトの中身を確認したいときには以下のようにします。(出力は「エラーコンソール」)

console.log( object )

Chrome, Firefox でオブジェクトの中身が DOMオブジェクトなのか jQueryオブジェクトなのかも合わせて確認したいときは

jq_obj =  $("#test01");
console.group('jq_objの中身は↓');
console.log(Object.getPrototypeOf( jq_obj ));
console.log(jq_obj);
console.groupEnd();

とするとメッセージがグループ化されていい感じに見えます。

No.510
12/15 15:24

edit

DOM
json
配列
jQuery

jQuery と prototype.js を同時に使う。($(); のコンフリクト回避)

jQueryとprototype.js を同時に使いたい場面がまれにあります。

そのとき

$('id_name'); //prototype.js
$('#id_name'); //jQuery

といった書式を jQuery, prototype.js 共に持っているのですが、その動作(書式や戻り値)が違います。

例えば戻り値の場合、

  • prototype.js:DOMオブジェクトを返す
  • jQuery:jQueryオブジェクトを返す

という違いがあります。

そこで jQueryとprototype.jsを同時に使いたい場合は jQueryの $(); を違う名前に変更して使います。

jQuery.noConflict();
var j$ = jQuery;

2行を追加します。

こうすることによって

// jQuery
jQuery('#id_name');
j$('#id_name');
//prototype.js
$('id_name');

として使用できます

No.499
12/15 15:20

edit

jQuery
prototype.js