1

私は3ページのウェブサイトを持っています。各ページには、2 つの入力フィールドを持つフォームがあります。私は、これまで入力フィールドと呼ばれていたものを入力するポップアップ数字キーパッドを作成しようとしています。以下は、私が何度も戻ってくる基本コードです。

<html>
<head><title>test</title></head>
<body>

<script> function num(id) { return document.getElementById(id); } </script>

<form action="/unitPage" method="POST" style=" text-align:center;">
Prefix: <input id="num" name"prefix" type="text" onfocus="num('keypad').style.display='inline-block';"/>

Number: <input id="num" name"number" type="text" pattern="[0-9]{6}" onfocus="num('keypad').style.display='inline-block';"/>
</form>

<div id="keypad" style="display:none; background:#AAA; vertical-align:top;">
<input type="button" value="7" onclick="num('num').value+=7;"/>
<input type="button" value="8" onclick="num('num').value+=8;"/>
<input type="button" value="9" onclick="num('num').value+=9;"/><br/>
<input type="button" value="4" onclick="num('num').value+=4;"/>
<input type="button" value="5" onclick="num('num').value+=5;"/>
<input type="button" value="6" onclick="num('num').value+=6;"/><br/>
<input type="button" value="1" onclick="num('num').value+=1;"/>
<input type="button" value="2" onclick="num('num').value+=2;"/>
<input type="button" value="3" onclick="num('num').value+=3;"/><br/>
<input type="button" value="X" onclick="num('keypad').style.display='none'"/>
<input type="button" value="0" onclick="num('num').value+=0;"/>
<input type="button" value="&larr;" onclick="num('num').value=num('num').value.substr(0,num('num').value.length-1);"/>
</div>

</body>
</html>

任意のページから呼び出す 1 つの数字キー パッドを作成する方法はありますか、または入力ごとに上記を作成する必要がありますか?

ありがとう

4

1 に答える 1

1

考えられる解決策の 1 つは、ヘッダーに javacript 呼び出しを追加して (現在 document.getElementById(id) 呼び出しを呼び出している場所で)、その HTML の DOM を操作し、そこに div を挿入することです。その要素の各ページにシェル div をお勧めします。その後、javascript は id (「キーパッド」) でその div を取得し、内部 HTML を挿入するだけです。

編集: 3 つのページ間で JavaScript ファイルを共有している限り、JavaScript を実装する必要があるのは 1 回だけです。

于 2013-11-12T21:51:32.863 に答える