以前に掲載したネタだが、ブログ整理中にあやまって削除してしまったため、再掲載する。

W-ZERO3でウェブを閲覧する際、いろいろ難点があるが、今回、その難点の一つ、テキストボックスへの文字入力を補助するUserJSを作ってみた。

ページによっては、テキストボックスが異常に小さく表示されてしまい、一体自分が何を入力しているのか分からなくなってしまうことがある。
今回のUserJSは、テキストボックスをクリックすると、入力用のボックスがポップアップで開くと言うもの。

スクリーンショットはこんな感じ。

テキストボックスをクリックすると。

ではど素人が書いたソースです。

<br /> document.addEventListener("load",textbox_focus,false);<br /> function textbox_focus()<br /> {<br /> var textbox = document.getElementsByTagName("input");</p> <p> for(var i=0;i<textbox.length;i++)<br /> {<br /> if(textbox[i].getAttribute('type').indexOf('text')!=-1||textbox[i].getAttribute('type').indexOf('password')!=-1){<br /> textbox[i].setAttribute('onClick','createLAYER('input',''+i+'',''+escape(textbox[i].value)+'');layojtext.focus();');<br /> }<br /> }</p> <p> var textarea = document.getElementsByTagName("textarea");</p> <p> for(var i=0;i<textarea.length;i++)<br /> {<br /> textarea[i].setAttribute('onClick','createLAYER('textarea',''+i+'',''+escape(textarea[i].value)+'');layojtext.focus();');<br /> }<br /> }</p> <p>function createLAYER(textbox_type,textbox_i,textbox_value)<br /> {<br /> var layoj = document.createElement('div');<br /> layoj.setAttribute('id','textbox_layer');<br /> layoj.setAttribute('align','center');<br /> layoj.style.backgroundColor='#FFCCFF';<br /> layoj.innerHTML = '<TEXTAREA name='layojtext' style='width:90%;height:85%;margin-top:5px;'>'+unescape(textbox_value)+'</TEXTAREA><br><input type='button' onClick='var inbox=parent.document.getElementsByTagName("'+textbox_type+'");inbox['+textbox_i+'].value=layojtext.value;parent.document.getElementById("textbox_layer").removeNode(true);;' value='OK'><input type='button' onClick='parent.document.getElementById("textbox_layer").removeNode(true)' value='Cancel'>';<br /> layoj.style.position = 'absolute';<br /> layoj.style.top = document.body.scrollTop + 'px';<br /> layoj.style.width = '95%';<br /> layoj.style.height = '60%';<br /> layoj.style.margin = '15px';<br /> layoj.style.padding = '5px';<br /> layoj.style.align = 'center';</p> <p> document.body.appendChild(layoj);<br /> return layoj;</p> <p>}<br />

残念ながらポップアップしないページもあります。
この点は継続検討と言うことで。

Pocket

Tweet