JavaScriptプログラムに関する各種メモ書き:タグ「フォーム」での検索

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
05/19 12:19

edit

フォーム
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
03/27 09:26

edit

フォーム
jQuery

jqueryでtextareaのサイズをドラッグで変更出来るようにする

● jQuery UI を使う方法

http://alphasis.info/2011/06/jquery-ui-resizable-textarea/

● jquery.funcResizeBox.js

http://wp.me/p4bIbo-Q3

No.1082
01/30 13:58

edit

jQuery
フォーム

jqueryでフォームのふりがな自動入力

jquery.autoKana.js https://github.com/harisenbon/autokana

<form>
<input type="text" id="user_name">
<input type="text" id="kana_name">
</form>
<script src="./jquery.autoKana.js"></script>
<script>
$(function() {
    $.fn.autoKana('#user_name', '#kana_name', {
        katakana : true  //true:カタカナ、false:ひらがな(デフォルト)
    });
});
</script>
No.1005
02/15 10:34

edit

jQuery
フォーム

クリックでクリップボードにコピーするボタンを作るjQueryプラグイン【clipboard.js】

● clipboard.js

https://zenorocha.github.io/clipboard.js/

このclipboard.jsは Flashを使用しません。 そのかわり Safari には未対応となっています。

● 使い方

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.5/clipboard.min.js"></script>
<script>
$(function () {
var clipboard = new Clipboard('.clip_copy_btn');
});
</script>
<input type="text" id="clip_copy_1" value="XXXXX">
<button class="clip_copy_btn" data-clipboard-target="#clip_copy_1" >クリップボードにコピーする</button>

です。

No.1000
01/26 21:27

edit

フォーム
jQuery
HTML5

ドラッグ&ドロップで複数ファイルファイルアップロード + 進捗(プログレスバー)表示する Dropzone.js

ファイルアップロードシステムを作るには Dropzone が簡単で便利です。 以下の様な特徴があります。

・jQueryを必要としない。(共存可能です。以下の例ではjQueryと併用します。)
・ドラッグ&ドロップでファイルアップロードが行える
・非同期でファイルアップロードが行える
・ファイルアップロード中の進捗バーを表示することが出来る

使い方は簡単です。

1. ファイルのダウンロード と用意

必要なファイルは

dropzone.js (ダウンロード)
dropzone_config.js (自分で作成)
dropzone_upload.php (自分で作成)
dropzone.css (自分で作成)

です。

■ dropzone.js

https://raw.githubusercontent.com/enyo/dropzone/master/dist/dropzone.js ( .jsファイル)
からダウンロードして保存します。

■ dropzone_config.js

dropzone_config.jsは以下のように作成しておきます (※要追加) のところは適宜追加すること。

$(document).ready(function() {
$('#image_drop_area').dropzone({
	url                          : './js/dropzone_upload.php',
	paramName                    : 'file',
	maxFilesize                  : 999 , //MB
	addRemoveLinks               : true ,
	previewsContainer            : '#preview_area' ,
	thumbnailWidth               : 50 , //px
	thumbnailHeight              : 50 , //px
	dictRemoveFile               :'[×]' ,
	dictCancelUpload             :'キャンセル' ,
	dictCancelUploadConfirmation : 'アップロードをキャンセルします。よろしいですか?' ,
		uploadprogress:function(file, progress, size){
		file.previewElement.querySelector("[data-dz-uploadprogress]").style.width = "" + progress + "%";
	},
	success:function(file, rt, xml){
		// それぞれのファイルアップロードが完了した時の処理(※要追加)
		file.previewElement.classList.add("dz-success");
		 $(file.previewElement).find('.dz-success-mark').show();
	},
	processing: function(){
		// ファイルアップロード中の処理(※要追加)
	} ,
	queuecomplete: function(){
		// 全てのファイルアップロードが完了した時の処理(※要追加)
	} ,
	dragover: function( arg ){
		$('#' + arg.srcElement.id).addClass('dragover');
	} ,
	dragleave: function( arg ){
		$('#' + arg.srcElement.id).removeClass('dragover');
	} ,
	drop: function( arg ){
		$('#' + arg.srcElement.id).removeClass('dragover');
	} ,
	error:function(file, _error_msg){
		var ref;
		(ref = file.previewElement) != null ? ref.parentNode.removeChild(file.previewElement) : void 0;
	},
	removedfile:function(file){
		delete_hidden('dropzone_files[]',file.xhr.response);
		var ref;
		(ref = file.previewElement) != null ? ref.parentNode.removeChild(file.previewElement) : void 0;
	} ,
	canceled:function(arg){
	} ,
	previewTemplate : "\
	<div class=\"dz-preview dz-file-preview\">\n\
	  <div class=\"dz-details\">\n\
	    <div class=\"clearfix\">\n\
	      <img class=\"dz-thumbnail\" data-dz-thumbnail>\n\
	      <div class=\"dz-success-mark\" style=\"display:none;\"><i class=\"fa fa-2x fa-check-circle\"></i></div>\n\
	    </div>\n\
	    <div class=\"dz-progress\"><span class=\"dz-upload\" data-dz-uploadprogress></span></div>\n\
	    <div>\n\
	      <div class=\"dz-filename\"><span data-dz-name></span></div>\n\
	      <div class=\"dz-my-separator\"> / </div>\n\
	      <div class=\"dz-size\" data-dz-size></div>\n\
	      <div class=\"dz-error-message\"><span data-dz-errormessage></span></div>\n\
	    </div>\n\
	  </div>\n\
	</div>\n\
	"
});
});

■ dropzone_upload.php

dropzone_upload.phpは以下のように作成しておきます

<?php
$ds = DIRECTORY_SEPARATOR;
$store_folder = dirname(__FILE__) . $ds . '..' . $ds . 'data' . $ds . 'tmp' . $ds;
// echo $store_folder;
if (!empty($_FILES)) {
	$temp_file = $_FILES['file']['tmp_name'];
	$ext = get_ext($_FILES['file']['name']);	// ファイル名から拡張子を取得
	$target_file = basename($_FILES['file']['tmp_name'].$ext);
	$ja_file     = $_FILES['file']['name'];
	$target_file_fullpath =  $store_folder . $target_file;
	move_uploaded_file($temp_file, $target_file_fullpath);
	echo "{$target_file}\t{$ja_file}";		// 英語ファイル名[TAB]日本語ファイル名 を返す
}

//========== _get_ext mime-typeを調べて拡張子を返す
function get_ext($file_name){
	$p = pathinfo($file_name);
	if ( isset($p['extension']) ){
		return '.'.$p['extension'];
	}
	else{
		return '';
	}
}

■ dropzone.css

dropzone.cssは以下のように作成しておきます

#image_drop_area {
	text-align: center;
	padding: 20px 0;
	height: 70px;
	width: 100%;
	color: #666;
	background-color: #f9f9f9;
	border: 4px dotted #bbb;
}
.dragover {
	color: #111               !important;
	background-color: #f1f1f1 !important;
	border: 4px dotted #777   !important;
}
.dz-preview {
	margin: 5px 0;
	padding: 10px;
	float: left;
	background-color: #F5F5F5;
	border-radius: 5px;
}
.dz-details {
	padding: 0;
}
.dz-filename , .dz-size, .dz-my-separator , .dz-remove {
	font: 11px "Lucida Grande", Lucida, Verdana, sans-serif;
}
.dz-filename , .dz-my-separator, .dz-size , .dz-error-message {
	float: left;
}
.dz-my-separator {
	width: 20px;
	text-align: center;
}
.dz-size {
	margin-top: 1px;
}
.dz-progress {
	width: 500px;
}
.dz-progress .dz-upload {
	display: block;
	border: 5px solid #1E9BFF;
	border-radius: 2px;
}
.dz-remove {
	float: left;
	margin-left: 5px;
}
.dz-thumbnail {
	margin-bottom: 3px;
}
.fa-check-circle:before {
	color: #93C54B;
}
.dz-thumbnail , .dz-success-mark {
	display: block;
	float: left;
}
.dz-success-mark {
	height: 25px;
	margin-left: 5px;
}

2. htmlファイルからdropzoneを読み込み

(formタグのactionは dropzone_upload.phpである必要はありません。通常のフォーム送信CGIでOKです。)

<html>
<head>
<meta charset="UTF-8">
<title>dropzone test</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="dropzone.js"></script>
<script src="dropzone_config.js"></script>
<link href="dropzone.css" type="text/css" rel="stylesheet" />
</head>
<body>
<form action="XXXXXX.XXX">
    <div id="image_drop_area" >ここにアップロードファイルをドロップ</div>
    <div id="preview_area" class="dropzone-custom"></div>
</form>
</body>
</html>

以上です。

No.982
01/22 23:37

edit

HTML5
フォーム
jQuery
Ajax
画像

JavaScript の getElement系メソッドによる HTMLタグ(DOMオブジェクト)の取得

JavaScriptでIDやタグ(DOMオブジェクト)を取得するとき

jQueryを使わないJavaScript本体では ・getElementsByTagName ・getElementsByName ・getElementById の3つのメソッドが使用できます。

DOMオブジェクト取得時には取得の成否を判別する必要があります。

使い方は以下のとおりです。

■ document.getElementsByTagName(タグ名によるDOMオブジェクトの取得)

<a href="#">テスト</a>
var obj_array = window.document.getElementsByTagName('a');
if (obj_array.length > 0){
  alert('Aタグは存在します。');
  for ( var i=0; i<obj_array.length; i++){
	  alert(obj_array[i].innerText);
  }
}
else{
  alert('Aタグは存在しません。');
}

■document.getElementsByName(name属性によるDOMオブジェクトの取得)
<input type="text" name="hoge_name">
if (window.document.getElementsByName("hoge_name").length > 0){
  alert('name="hoge_name"のタグが存在します。');
}
if (window.document.getElementsByName("fuga_name").length > 0){
  alert('name="fuga_name"のタグが存在します。');
}
else{
  alert('name="fuga_name"のタグが存在しません。');
}

■document.getElementById(ID名によるDOMオブジェクトの取得)
<div id="hoge_id"></div>
if (window.document.getElementById("hoge_id")){
  alert('id="hoge_id"のタグが存在します。');
}
if (window.document.getElementById("fuga_id")){
  alert('id="hoge_id"のタグが存在します。');
}
else{
  alert('id="hoge_id"のタグが存在しません。');
}
No.979
10/23 16:34

edit

フォーム
DOM
jQuery

入力途中のフォーム内容を保存して自動的に復元する 『Sisyphus.js』

『Sisyphus.js』はフォームへの入力途中に「戻るボタン」を押して画面遷移した場合や「リロード」ボタンを押した時に自動的に値をローカルDBに保存して復元してくれるjQueryプラグインです。

HTML5のローカルDBを使用しますので Windows IE は 8以上が必要です。 それ以外のモダンブラウザは全て問題なく動作します。

■ Sisyphus.js

http://sisyphus-js.herokuapp.com/

■ 使い方( input type="hidden" 以外の全てのフォームを自動で記憶する。)

<form id="FM">
</form>
$(function(){
	$( "#FM" ).sisyphus( {
		locationBased: false,
		excludeFields: $('input[type="hidden"]'),
		autoRelease: false
	} );
});
No.974
09/09 15:00

edit

フォーム
jQuery
HTML5

prototype.js の フォーム操作

1行テキストエリア(id="hoge")の値

<input type="text" name="hoge" id="hoge" value="999" >
// ◆ prototype.js
$F('hoge');

オプションメニュー(ドロップダウンリスト)(id="hoge")の値

// ◆ prototype.js
$F('hoge');

ラジオボタン(id="radio_id")の値の取得

// ◆ prototype.js
var data = $A(document.FM.radio_id).find(function(v) {return v.checked;});

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

<label><input type="checkbox" id="cb1_id" name="cb1" value="あいうえお" />あいうえお</label>
// ◆ prototype.js
alert( $F('cb1') );

No.973
09/09 14:37

edit

prototype.js
フォーム

フォームのプレースホルダーをjQueryで再現する

HTML5のプレースホルダー(placeholder : 入力例)はブラウザによって挙動が違うためイマイチ使い勝手がよくありません。
そこでjQueryで同様のことを実現します。
さらに、フォーカス時に入力例が消えて、フォーカスが外れると入力例が再び表示される仕様にします。

■ 動作デモはこちら

HTML

<div style="position:relative;" >
<input type="text" class="placeholder_check">
<span class="placeholder">http://</span>
</div>

JS

$(function(){
$(".placeholder_check").each(function(){
if( $(this).val() ){
  $(this).next(".placeholder").hide();    
}
});
$(".placeholder_check").focus(function(){
  $(this).next(".placeholder").hide();
});
$(".placeholder").click(function(){
  $(this).prev(".placeholder_check").focus();
});
$(".placeholder_check").blur(function(){
  if($(this).val() == "") {
    $(this).next(".placeholder").show();
  }
});
});

CSS

.placeholder {
	display: block;
	white-space:pre;
	position: absolute;
	top: 9px;
	left: 30px;
	color: #bbb;
}

参考 : http://hack.aipo.com/?p=3005

添付ファイル1
No.964
07/23 09:54

edit

添付ファイル

jQuery
フォーム
HTML5

jQueryでフォームの全ての要素に入力や選択があるかどうかを調べる

関数 is_form_written を定義

function is_form_written(jq_obj){
	var tagname = $(jq_obj).prop("tagName");
	var type = $(jq_obj).prop('type');
	if (tagname==='SELECT'){
		if ( $(jq_obj).val() === '' ){ return false; }
		else{ return true; }
	}
	else if (tagname==='INPUT'){
		if (type==='radio'){
			return $(jq_obj).prop('checked');
		}
		else if (type==='checkbox'){
			return $(jq_obj).prop('checked');
		}
		else if (type==='text'){
			if ($(jq_obj).prop('value')!==''){ return true; }
			else{ return false; }
		}
	}
	else{
console.log($(jq_obj).prop("tagName"));
	}
}

以下のように呼び出して全ての要素(input , select , textarea)をチェックします

$('input,select,textarea').each(function(){
	if ( is_form_written(this) ){
		alert( $(this).prop('name') + ' は入力または選択済みです。');
	}
})
No.935
03/19 19:15

edit

jQuery
フォーム

jQueryでフォームの入力値をチェックする(Validation)プラグイン

● jQuery Validation Plugin

http://jqueryvalidation.org

● 日本語での解説

http://kudakurage.hatenadiary.com/entry/20091211/1260521031

● スクリプトの読み込み

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js

● 用意するHTML

<form name="FM">
<input type="text" name="hoge">
<input type="text" name="fuga">
</form>

● バリデーションの定義

$("#FM").validate({
	rules: {
		hoge: {
			required: true
		} ,
		'fuga': {
			required: true
		} 
	} ,
	messages: {
		hoge: {
			required: '入力してください。'
		} ,
		'fuga': {
			required: '入力必須項目です。'
		} 
	}
});

● 標準搭載されているバリデーションメソッド

required – Makes the element required.
remote – Requests a resource to check the element for validity.
minlength – Makes the element require a given minimum length.
maxlength – Makes the element require a given maxmimum length.
rangelength – Makes the element require a given value range.
min – Makes the element require a given minimum.
max – Makes the element require a given maximum.
range – Makes the element require a given value range.
email – Makes the element require a valid email
url – Makes the element require a valid url
date – Makes the element require a date.
dateISO – Makes the element require an ISO date.
number – Makes the element require a decimal number.
digits – Makes the element require digits only.
creditcard – Makes the element require a credit card number.
equalTo – Requires the element to be the same as another one

● 正規表現のバリデーションメソッドを追加する

$.validator.addMethod("myregex", function(value, element, reg_str) {
	var re = new RegExp(reg_str);
	return re.test(value);
}, "入力値が正しくありません");

バリデーション定義に以下のように記述

rules: {
	postal: {
		myregex: '^[0-9\-]+$'
	}
} ,
messages: {
	postal: {
		myregex: '郵便番号を正しく入力してください。'
	}
}

● バリデーションのルールを追加するには関数を定義します

jQuery.validator.addMethod('my_validation_func', function(value, element) {
	if ( XXXXX ){		// XXXXX にエラー判別ロジックを記述
			return true;	// trueが返るとエラーとならない
		}
	else{
		return false;	// falseが返るとエラー
	}
}, 'デフォルトのエラーメッセージ');

● エラー時にエラーのあったフォーム要素自身にエフェクトをかける

$("#FM").validate({
  highlight: function(element, errorClass) {
     $(element).fadeOut(function() {
       $(element).fadeIn()
     })
  }
});

● フォームのハイライトを中止する

標準ではエラー時にフォーム要素に error というクラスが付加されますが、これがいらない場合は 空のfunction() を定義します。

$("#FM").validate({
    highlight: function(element, errorClass) {
    }
});

● 任意のタイミングでバリデーションを実行する

バリデーションの実行タイミングは ・フォーム Submit時 ・エラー後のフォーム内容変更時 ですが、任意のタイミングでバリデーションを実行するには valid()メソッドを実行すればOK。

<form id="FM">
$("#FM").valid();

● 特定のボタンが押された時など任意のタイミングでvalidationを停止する

$("#FM").validate().cancelSubmit = true;

● バリデーション required 条件の条件分岐1

下記のようにすると id="foo" のラジオボタンやチェックボックスがチェックされている時にだけバリデーションを行います

rules: {
  my_name : { required: '#foo:checked' } 
} ,

次のような指定方法があります

指定値 説明
#foo:checked id="foo" のラジオボタンやチェックボックスがチェックされている時
#foo:filled id="foo" のフォーム要素に何か文字(空白以外)が入力されている時
#foo:visible id="foo" のフォーム要素が表示されている時

● バリデーション required 条件の条件分岐2

rules: {
  my_name : { required: function() { return ($('#my_flg').val() === '1' ); } } 
} ,
messages: {
  my_name: { required: 'my_flgが『1』の時はmy_nameは空欄にはできません' } 
}
No.928
08/07 12:09

edit

フォーム
jQuery
エラー対処

jQuery でのフォーム操作

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

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

● 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")の値

// ◆ jQuery
var v = $('#hoge').val();
var v = $('#hoge :selected').text();

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

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

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

$( "[name='my_radio']" ).prop('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);
});
No.666
07/13 11:48

edit

prototype.js
jQuery
フォーム

フォームに適当な値を自動で入力するブックマークレット(フォーム自動入力BookMarklet)

Firefox の WebDeveloper みたいなのを、Safari, Google Chrome で利用したいときに。
(下記リンクをブックマークバーにドラッグしてください)

フォーム自動入力Bookmarklet


登録できてもうまく動作しない時は ↑フォーム自動入力Bookmarklet のアドレスをコピーして
ブックマークレットのアドレスに再度ペーストしてください。


No.665
06/16 16:07

edit

Bookmarklet
フォーム

Gmailのように「shift + クリック」でチェックボックスの複数選択を可能にするjQueryプラグイン

Gmailはチェックボックスを複数一気に選択したいときに先頭をまずクリックして、次に最後のチェックボックスを【シフト+クリック】するとその間にあるチェックボックスが一気に選択できて非常に便利なのですが、それをjQueryプラグインで実現するには以下のようにします。

■ 1.jQueryをダウンロード

http://jquery.com/

からjQueryをダウンロードします。(ダウンロードしたファイル名を jquery.js とします。)

■ 2. jQuery Field Plug-inをダウンロード

http://www.pengoworks.com/workshop/jquery/field/field.plugin.htm

から【jquery.field.js】をダウンロードします。

■ 3. 以下のようなチェックボックスを含むhtmlを用意します

<form>
  <input type="checkbox" name="user_id" id="ch_1" value="1"><label for="ch_1">Option 1</label>
  <input type="checkbox" name="user_id" id="ch_2" value="2"><label for="ch_2">Option 2</label>
  <input type="checkbox" name="user_id" id="ch_3" value="3"><label for="ch_3">Option 3</label>
  <input type="checkbox" name="user_id" id="ch_4" value="4"><label for="ch_4">Option 4</label>
  <input type="checkbox" name="user_id" id="ch_5" value="5"><label for="ch_5">Option 5</label>
</form>

■ 4. 用意したhtmlのヘッダに以下の記述を追加

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.field_j.js"></script>
<script>
	$(document).ready(
		function (){
			$('input[@name="user_id"]').createCheckboxRange();
		}
	);
</script>

以上で「シフト+クリック」による複数選択が実行できます。

とても便利。

また「シフト+クリック」実行後にコールバック関数を指定することもできます。

function (){
	$('input[@name="user_id"]').createCheckboxRange( function(){
		alert('選択完了');
	} );
}

No.591
08/10 11:20

edit

jQuery
フォーム

JavaScript で hidden属性<input type=”hidden” name=”name” value=”value”>を作成する

意外に登場する機会が多いので関数として登録しておく

■ hidden属性を作成する make_hidden()

// make_hidden : hiddenを作成する : Version 1.1
function make_hidden( name, value, formname ){
    var q = document.createElement('input');
    q.type = 'hidden';
    q.name = name;
    q.value = value;
	if (formname){ document.forms[formname].appendChild(q); }
    else{ document.forms[0].appendChild(q); }
}

使い方:引数は( '名前' , '値', 'フォーム名' )

make_hidden('id', '1234');

とすると

<input type="hidden" name="id" value="1234">

が作成されます。

またHTMLファイル内に複数の<form>タグが存在する場合はフォーム名を指定して呼び出せばOK。

<form name="FM"></form>
<form name="SFM"></form>

の二つのフォームが存在する場合

make_hidden('id', '1234', 'SFM');

とすると name="SFM" の方にhiddenが作成されます


また作成した hidden 属性を削除するには以下の関数を使用します

■ hidden属性を削除する make_hidden()

// delete_hidden : hiddenを削除する : Version 1.1
function delete_hidden( name, value, formname ){
	var dom_obj_array = window.document.getElementsByName(name);
	for (var i=0; i<dom_obj_array.length; i++){
		if ( dom_obj_array[i].value === value ){
			element = dom_obj_array[i];
			element.parentNode.removeChild(element);
		}
	}
}
No.540
11/27 15:23

edit

DOM
フォーム