テキストボックスのクリア
ページ上の全てのテキストボックスを空にします。ページ上にフォームが複数ある場合も問題ありません。
<![CDATA[
function clearTextBoxes() {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type == "text") {
inputs[i].value = "";
}
}
}
]]>
テキスト入力の禁止
フラグを設定し、ラジオボタンによりフラグの値を切り替えます。
フラグの値がtrueの時は、blurメソッドでフォーカスをはずすことでテキストフィールドからの入力を禁止します。
<![CDATA[
myFlag = true;
function unFocus(){
myFlag = true;
document.forms[0].reason.value = "";
}
]]>
<![CDATA[
<FORM>
次の会合に出席しますか？<BR>
<INPUT type="radio" name="myRadio" onClick="unFocus()">出席する<BR>
<INPUT type="radio" name="myRadio" onClick="myFlag = false">欠席する<BR><BR>
欠席の方のみ理由をお書きください。<BR>
<INPUT type="text" name="reason" onFocus="if(myFlag) this.blur()">
</FORM>
]]>
テキストフィールドのonFocusで判断
<![CDATA[
<FORM>
得意な言語はどれですか？<BR>
<INPUT type="checkbox" name="chk1">Java<BR>
<INPUT type="checkbox" name="chk2">JavaScript<BR>
<INPUT type="checkbox" name="chk3">PHP<BR>
<INPUT type="checkbox" name="chk4">Perl<BR>
<INPUT type="checkbox" name="chk5" onClick="if(!this.checked) document.forms[0].txt.value = ''">その他
<INPUT type="text" name="txt" onFocus="if(!document.forms[0].chk5.checked) this.blur(),this.value = ''">
</FORM>
]]>
数値にカンマ挿入
テキスト入力値が数値の場合はカンマを挿入して表示します。
フォーム送信前に(onsubmit)挿入したカンマを取り除いているのでサーバにはカンマなしの数値を送っています。。
<![CDATA[
// 数値にカンマを挿入
function addComma(str) {
if (isNaN(str)) return str;
var count = 0;
var num= "";
for (var i = str.length - 1; i >= 0; i--) {
num= str.charAt(i) + num;
count ++;
if (((count % 3) == 0) && (i != 0)) {
num = "," + num;
}
}
return num;
}
// カンマを除去
function delComma(numStr){
var re = /,/g;
return numStr.replace(re, "");
}
]]>
<![CDATA[
<form action="#" onsubmit="this.num.value = delComma(this.num.value);">
カンマ挿入<br>
<input type text" name="num" style="ime-mode:disabled;" onchange="this.value = addComma(this.value)" /><br>
<input type="submit" value="送信" />
</form>
]]>
テキスト入力値の限定
onkeypressイベントで入力された文字を調べます。
半角数字、負号、小数点に限定
<![CDATA[
function numberOnly(evt) {
evt = (evt) ? evt : ((window.event) ? event : null);
if (evt) {
var elem = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if (elem) {
var charCode = (evt.charCode) ? evt.charCode :
((evt.which) ? evt.which : evt.keyCode);
if ((charCode < 32 ) ||
(charCode > 44 && charCode < 47) ||
(charCode > 47 && charCode < 58)) {
return true;
} else {
alert("半角数字、負号(-)または小数点(.)のみ入力して下さい。");
return false;
}
}
}
}
]]>
英字(大文字・小文字)に限定
<![CDATA[
function letterOnly(evt) {
evt = (evt) ? evt : ((window.event) ? event : null);
if (evt) {
var elem = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if (elem) {
var charCode = (evt.charCode) ? evt.charCode :
((evt.which) ? evt.which : evt.keyCode);
if (charCode > 31 && (charCode < 65 || charCode > 90) &&
(charCode < 97 || charCode > 122)) {
alert("英字(大文字・小文字)のみ入力して下さい。");
return false;
} else {
return true;
}
}
}
}
]]>
日本語入力モードになっている時は、このチェックが効きません。
ブラウザがIEの場合は、IMEモードを日本語入力不可にすることができます。
<![CDATA[
<input type="text" onkeypress="return numberOnly(event)" style="ime-mode:disabled;">
<input type="text" onkeypress="return letterOnly(event)" style="ime-mode:disabled;">
]]>
