2011年10月21日

テキストボックスに入力された内容を他のテキストボックスにコピー

javascript制作の備忘録・・・。メールフォームやショッピングカートで、テキストボックスA、Bがあるり、Aに文字列を入力。
ボタンあるいはチェックボックスをオンにすると、Aの内容をBにコピーするためのjavascript

〓〓〓〓〓〓〓〓〓〓〓〓
javascript部分
〓〓〓〓〓〓〓〓〓〓〓〓
※ インラインに直接
onclick="this.form.boxA.value=this.form.boxB.value;"
と記述するのも簡単でOkですが、より汎用性を重視して・・・

<script type="text/javascript">
function TransV(objF,fromName,toName){
objF.elements[toName].value 
= objF.elements[fromName].value;
}
</script>

としました。

〓〓〓〓〓〓〓〓〓〓〓〓
HTMLt部分
〓〓〓〓〓〓〓〓〓〓〓〓
<form>
  <input name="tx1" type="text" /><br />
  <input name="tx2" type="text" /><br />
  <input name="tx3" type="text" /><br />
  <input name="tx4" type="text" /><br />
  <!--[チェックボックス版]-->
  <input type="checkbox" onclick="TransV(this.form,'tx1','cp1'),TransV(this.form,'tx2','cp2'),TransV(this.form,'tx3','cp3'),TransV(this.form,'tx4','cp4');"  /><br />
    <!--[ボタン版]-->
  <input type="button" value="複製" onclick="TransV(this.form,'tx1','cp1'),TransV(this.form,'tx2','cp2'),TransV(this.form,'tx3','cp3'),TransV(this.form,'tx4','cp4');"  /><br />
  <input name="cp1" type="text" /><br />
  <input name="cp2" type="text" /><br />
  <input name="cp3" type="text" /><br />
  <input name="cp4" type="text" />
</form>

となります。
WEB制作に携わる方はご自由にご利用下さい。
posted by ITF at 16:27| 奈良 ☁| Comment(0) | チュートリアル | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。