二つの入力欄に、同時に同じ文字を入力したい

質問

掲示板の投稿欄を、
「お手軽版（投稿欄(1)）」と
「本格版（投稿欄(2)）」の二種類を用意したいと思っています。

JavaScriptを使って、
例えば、投稿欄(1)に名前を入力したら、
同じ文字列が投稿欄(2)にも反映されるようにしたいのですが、
どのようなコードを書けば良いでしょうか。

似たような質問を調べたのですが、
(1)を<input name="A">、(2)を<input name="B">としてAをBにコピーするというものがありました。
試してみると確かに同じ文字列が入力されるのですが、肝心の投稿ができませんでした。

掲示板の仕様上、
(1)も(2)も<input name="name">の部分は必須で、変えられないようなのです。
ちなみに(1)にだけ入力して(2)が空欄だと、空欄として処理されてしまいます。
<form>タグも一つしか使えません。

一晩色々やってみてどうしても上手くいかず、
最後の手段として、こちらでご教授願えればと思い、お伺いしました。
説明がヘタで申し訳ないのですが、不足な点は仰って下さい。
どうぞよろしくお願いいたします。

この投稿のマルチメディアは削除されているためご覧いただけません。

回答No.5

DoubtOwl · ベストアンサー

動くと思うんですがね・・・
nameCとnameDが逆になってるのかも？
下記と比較してください。

function copyToC()
{
var nameC = document.getElementById("nameC");
var nameD = document.getElementById("nameD");
nameD.value = nameC.value;
}
function copyToD()
{
var nameC = document.getElementById("nameC");
var nameD = document.getElementById("nameD");
nameC.value = nameD.value;
}

※余談
スクリプトをシンプルにしたいなら下記でもOK

タグ
<input name="name" id="nameA" onkeyup="copyTo('nameA','nameB')">
<input name="name" id="nameB" onkeyup="copyTo('nameB','nameA')">

<input name="name" id="nameC" onkeyup="copyTo('nameC','nameD')">
<input name="name" id="nameD" onkeyup="copyTo('nameD','nameC')">

スクリプト
function copyTo(fromId, toId)
{
var fromTag = document.getElementById(fromId);
var toTag = document.getElementById(toId);
toTag.value = fromTag.value;
}

お礼

素晴らしい！
新しく教えていただいたシンプル版で、完璧に動作いたしました！
今回は度重なる質問にお答えいただき、ご迷惑をお掛けしました。
そして、本当にありがとうございました。
感謝・感謝の一言です。
私もこのように「やりたい事」が自力で解決できるよう、精進したいと思います。
本当に、大変お世話になりました。

回答No.4

DoubtOwl

確認してみたところInternetExplorerだと妙な動きをするようですね。

いっそこうしましょうか。
IDを追加しても問題ないでしょうし。

タグ
<input name="name" id="nameA" onkeyup="copyToB()">
<input name="name" id="nameB" onkeyup="copyToA()">

スクリプトは下記。
function copyToB()
{
var nameA = document.getElementById("nameA");
var nameB = document.getElementById("nameB");
nameB.value = nameA.value;
}
function copyToA()
{
var nameA = document.getElementById("nameA");
var nameB = document.getElementById("nameB");
nameA.value = nameB.value;
}

補足

素晴らしいです！完璧に同期しました。
本当にありがとうございます！

こちらを「ペンネーム<name="name">」と「本文<name="sub">」
の両方の入力欄に適用させたくて、上記コードに習ってスクリプトにnameCとnameDを追加し、
二つの「本文」のタグに
<input name="name" id="nameC" onkeyup="copyToD()">
<input name="name" id="nameD" onkeyup="copyToC()">
のように追記して適用させようとしたのですが、うまく動きませんでした。
そんなに単純ではないのですね・・・

ここまで教えて頂いて、
ここからの応用は初歩的な事なのかもしれずお恥ずかしい限りですが、
二つの入力欄をそれぞれ同期させるには、どのようにすれば良いのでしょうか。
是非ともお力をお貸し頂けたら嬉しいです。

回答No.3

DoubtOwl

先に書いたものは余計な行がありましたね。
ムダも多かったので下記でどうぞ

タグは下記にする。
<input name="name" onkeyup="namecopy(this)">

スクリプトは下記。
function namecopy(tag)
{
// name="name"のタグを全て取得
var names = document.getElementsByName("name");
// 入力文字(tag.value)を全てのname="name"のvalueにいれる
for (var i = 0; names.length > i; i++) {
names[i].value = tag.value;
}
}

補足

再びの回答、本当にありがとうございます。
試させていただいたところ、見事にリアルタイムに同期しました！

・・・のですが今度は、
半角英数での入力は、本当に素晴らしく理想通りの同期をしてくれるのですが、
日本語入力で文字を打とうとすると、問題が発生してしまいました。

例えば日本語入力で「今日は晴れ」と打ちたい時に、
「今日は」とまず打って、続けて「晴れ」と打とうとすると、
「今日は」が上書きされて、「晴れ」だけが残ってしまう、という状態になりました。

どうやら、日本語入力の場合は「最後に入力した文字」だけがフォーム内に残る、
という状態のようです。

一応私も素人なりに原因を探ろうとしたのですが、
結局さっぱり分からずじまい・・・
こう何度もお尋ねして申し訳ない気持ちになってきますが、
もし何か改善策がございましたら、お力をお貸し頂けたら幸いです。

回答No.2

DoubtOwl

他にも<input name="name">のタグがある場合は使えませんが・・・

(1)と(2)の<input name="name">を
<input name="name" onkeyup="namecopy()">として

javascriptが

function namecopy()
{
// name="name"のタグを全て取得
var names = document.getElementsByName("name");
var copyValue = "";
// 入力されている文字を取得
for (var i = 0; names.length > i; i++) {
if(names[i].value != "")
{
copyValue = names[i].value;
break;
}
}
// 取得した文字を全てのname="name"のvalueにいれる
for (var i = 0; names.length > i; i++) {
if(names[i].value != "")
{
names[i].value = copyValue;
}
}
}

補足

とても具体的な回答ありがとうございます！
さっそく試してみました。
すると見事にコピーされるにはされる・・・のですが、
リアルタイムな同期（1のフォームに文字を打つと同時に2にも反映される）ではなくて、
2のフォームにワンアクション（なんでもいいから文字を打つとか）しないと同期しないようでした。
ワンアクションを加えた後はリアルタイムに同期するのですが・・・

具体的なコードまで書いていただいて本当にありがとうございます。
欲張りな質問になってしまいますが、
ワンアクションを加えることなく、最初からリアルタイムな同期というのは難しいものでしょうか？
もしもいい方法がありましたらご教授願えたら嬉しいです。

回答No.1

noname#247307

>掲示板の仕様上、
>(1)も(2)も<input name="name">の部分は必須で、変えられないようなのです。
>ちなみに(1)にだけ入力して(2)が空欄だと、空欄として処理されてしまいます。
><form>タグも一つしか使えません。

ということは、あなたが作った掲示板ではなく、どこかの掲示板プログラムを利用しているということですね。

「<input name="name">の部分は必須で、変えられない」「<form>タグも一つしか使えません」ということであれば、素直に考えれば「掲示板のフォームは１つしか設置できない」ということになるでしょう。それを踏まえて解決策を考えるなら。

1. 掲示板のプログラムを書き換えて対応する。
2. フォームを１つだけで済むように対応する。

このいずれかになるでしょう。

プログラムが変更できれば、１の掲示板の処理を変更することで、「<input name="B">としてAをBにコピーする」というやり方ができるようになるでしょう。

それが無理なら、例えば本格版のフォームのみを用意し、必要に応じて不要な項目を非表示にして簡易版の表示にする、というようにして、１つのフォームで簡易版と本格版が切り替わるような方法が考えられるでしょう。

補足

回答ありがとうございます。
すみません、大事な部分を書き忘れていました、レンタル掲示板です。
なので提示して頂いた１の方法は恐らく無理だと思いますが、
２の方法はとても良さそうです。調べてみたいと思います。