2008-09-20 JavaScriptでreadonly 
JavaScriptでtextフィールドやtextareaフィールドをすべて入力不可にしたい場合がある。その場合、
<input type=text disabled=true>
とdisabled属性を使うことも可能だが、disabledを指定すると背景色は変更できるが前景色が変更できない。今回、入力画面と参照画面で同じJSPを使用し、参照画面の場合は、textフィールドを背景色を灰色、前景色を黒にしたいという仕様を満たすためには、readOnly属性を使うと良い。
このreadOnly属性はreadonlyではNGでreadOnlyでOが大文字でなければならない。ちょっとハマったので書いておく。
たとえば、入力画面とまったく同じで参照画面を作るときは、
<body onload="javascript:readOnly()">
として以下のJavaScriptを呼び出すとすべて入力項目が入力不可になるので便利だ。(checkBoxなどは今回は対象外。もちろん、JSPは入力用と参照用で同じにするため、onload部分を入力用と参照用でパラメータを渡すか、function名を変えるかなどの工夫は必要。)
/**
* すべてのtext, textareaフィールドをreadonlyにする
*
* @return
*/
function readOnly(){
for(i=0;i<document.forms.length;i++){
for(j=0;j<document.forms[i].elements.length;j++){
if(document.forms[i].elements[j].type=="text" ||
document.forms[i].elements[j].type=="textarea"){
document.forms[i].elements[j].readOnly=true;
document.forms[i].elements[j].style.color="#FF0000";
document.forms[i].elements[j].style.background="#E0E0E0";
}
}
}
}
コメントを書く
トラックバック - http://d.hatena.ne.jp/fkawakam/20080920