ポイントを入力するテキストボックスが2つあって、
1つめのテキストボックスの値が変更されたら2つめの
テキストボックスにもその変更された値を表示するとい
う事は可能でしょうか?
onChangeの処理かなーとも思ったのですが書き方がよく
わかりません。
何か良い方法がありましたら教えて下さい。

このQ&Aに関連する最新のQ&A

A 回答 (5件)

JavaScriptのレイヤー処理苦手なんですけどね(^^;;


乗りかかった船ってことで、無理矢理ですけど動作確認したHTMLを以下に書いておきます。

※ 「<」と「>」は半角に、字下げに使用している全角スペースは半角スペースやタブに変えて下さいね。

<html>
<head>
  <script type="text/javascript"><!--
  function outmsg( msg ) {
    if( msg == null ) msg = "";
    if( document.all ) {
      ie_out = document.all("out_box");
      ie_out.innerHTML = msg;
    }else if( document.layers ) {
      nn_out = document.layers["out_box"];
      nn_out.document.open();
      nn_out.document.write( msg );
      nn_out.document.close();
    }
  }
  // --></script>
</head>
<body>

<form>
  <input type="text" name="in_box" onChange="outmsg( this.value );">
</form>

<table border=0><tr>
  <layer name="out_box"><td>
  <span id="out_box"></span>
  </td></layer>
</tr></table>

</body>
</html>

参考まで
    • good
    • 0
この回答へのお礼

hequilさんありがとうございます!!
上のソースで思った通りの処理が出来ました。
とても助かりました。ありがとうございました。

また質問という形になってしまってとても申し訳無いのですが、
この処理はテキストボックスが不特定の時にも使用する事は可能でしょうか?
テキストボックスの数が決まっていないので、出力先のout_boxの名前を
onChange="outmsg( this.value )"
に追加パラメータとして渡し、出力先を指定するようにしてみたのですが、
エラーが出てしまいました。

<HTML><HEAD>
<script type="text/javascript"><!--
 function outmsg( msg ,txt) {
  if( msg == null ) msg = "";
  if( document.all ) {
    ie_out = document.all(txt);
    ie_out.innerHTML = msg;
  }else if( document.layers ) {
     nn_out = document.layers[txt];
     nn_out.document.open();
     nn_out.document.write( msg );
     nn_out.document.close();
  }
}
// --></script>
</head>
<body>
<table border="1">
 <td>
 <input type="text" name="in_box0" onChange="outmsg( this.value ,"out_box0");">
 <layer name="out_box0"><td>
 <span id="out_box0"></span>
 </td></layer>
 </td>
 <td>
 <input type="text" name="in_box1" onChange="outmsg( this.value ,"out_box1");">
 <layer name="out_box1"><td>
 <span id="out_box1"></span>
 </td></layer>
 </td>
</table>
</BODY>
</HTML>

という書き方ではまずいのでしょうか?
すみませんが見て頂けると助かります。

お礼日時:2001/03/07 11:15

ダブルクォーテーションの中にダブルクォーテーションは使えないので、



onChange="outmsg( this.value ,"out_box0");"
onChange="outmsg( this.value ,"out_box1");"



onChange="outmsg( this.value ,'out_box0');"
onChange="outmsg( this.value ,'out_box1');"

にすれば、エラーは直ると思います。

ただし、補足のHTMLだとformタグやtrタグがなかったり
layerタグの位置の問題で、ネスケで正常に動作しないと思いますが、その辺りはブラウザを再読込しながら色々試してみると良いかと思います。
(この辺りがネスケの苦労するところ、苦笑)

参考まで
    • good
    • 0
この回答へのお礼

何度も回答してもらってありがとうございました。
エラー直りました!!
でもネスケで全然動いてくれない・・・
IEでは正常に動いてくれるのですが(涙)
色々試してみたのですがまだ無理です。

再度色々試してみたいと思いますが、どうしても無理な
時はまた質問という形をとってもよろしいでしょうか?

hequilさんには何度もご迷惑をおかけしていると思いますが
どうぞ宜しくお願い致します。

お礼日時:2001/03/07 19:49

ものすごくシンプルに書くとこんな感じになります。


※「<」と「>」は実際には半角で書いて下さいね。

<form name="sample">
<input type="text" name="in_box" onChange="document.sample.out_box.value=this.value;">
<input type="text" name="out_box">
</form>

参考まで

この回答への補足

とてもわかりやすい説明ありがとうございました!!
試してみたところうまくいきました。
そこでもう一つなのですが、同じ処理を
入力は

<input type="text" name="in_box" onChange="document.sample.out_box.value=this.value;">

のテキストボックスで、その変更された値を表示するのは
テキストボックスではなくて

<td><b><font>ここに値が入ります</font></b></td><br>

にしても同じような事は可能でしょうか?
すみませんがよろしくお願いします。

補足日時:2001/03/06 19:07
    • good
    • 0

すみません、確認画面ではちゃんと表示されてたんですが、わけわかんないソースになってしまってますね。



&lt;:<
&gt;:>

とそれぞれ読み替えてください。
    • good
    • 0
この回答へのお礼

さっそくの回答ありがとうございました。
ソースを参考に試してみたいと思います。

お礼日時:2001/03/06 19:10

2つのテキストボックスでいいんですよね?


とりあえず下記ソースのようで、いかがですか?
適当にアレンジしてみてください。
---------
&lt;html&gt;
&lt;head&gt;
&lt;script language="javascript"&gt;
&lt;!--
function henko(){
t1 = hoge.text1.value;
hoge.text2.value = t1;
}
--&gt;
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form name="hoge"&gt;
1つ目&lt;input type="text" name="text1" onchange="henko();"&gt;
<br&gt;
2つ目&lt;input type="text" name="text2"&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qテキストボックスの値変更時のイベント

フォーム上のテキストボックスに、前の画面で入力したデフォルト値が表示されている状態で、テキストボックスの値を変更したらJavaScriptの関数でチェックさせたいと考えているのですがうまくいきません。

onChangeイベントは値を変更(例えば削除するなど)して、Enterキーを押すなりフォーカスを移すなりしないとイベントが発生しないので、変更されたら即座にチェックということができません

何かうまい方法はないでしょうか?

Aベストアンサー

timeID = window.setInterval("TextChange();",1);

で、常に function TextChange を呼び出し続けることで
テキストの変化を監視することが出来ます。

監視を中止したい時は、
clearInterval = timeID; で止められます。

setInterval を使うと、ミスをした場合
無限ループに陥る可能性があるのでご注意下さい。
(alert表示などは特に、強制終了しか方法がなくなります。)

setInterval を使いこなせるようになると
プログラミングの幅が広がりますので、いい機会かも知れませんよ。
なにより、楽しいですし。(笑

参考URL:http://www.google.co.jp/search?hl=ja&ie=Shift_JIS&q=javascript+setinterval&btnG=Google+%8C%9F%8D%F5&lr=lang_ja

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

Qonchangeイベントを強制的に発生させる

お世話になります。
onchangeイベントをjavascriptで強制的に動作させたいと思っております。

発生させたい場合
・ユーザーがtextボックスを入力
・リンクボタンを押下した場合

簡単なことなのかもしれませんが、
ご教授よろしくお願いいたします。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<script type="text/javascript">

function change(){
alert('test');
}

function update(){
document.getElementById('1').value = "update";
document.getElementById('1').onchange = change;
}


</script>

<input id="1" type="text" value="1" onchange="change();">

<a href="javascript:update();">update</a>

お世話になります。
onchangeイベントをjavascriptで強制的に動作させたいと思っております。

発生させたい場合
・ユーザーがtextボックスを入力
・リンクボタンを押下した場合

簡単なことなのかもしれませんが、
ご教授よろしくお願いいたします。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<script type="text/javascript">

function change(){
alert('test');
}

function update(){
document.getElementById('1').value = "update";
document.getElementById('1').onchan...続きを読む

Aベストアンサー

回答は出てますが・・・onchangeにこだわるなら、

document.getElementById('***').onchange();

()を付ければ呼び出せます。(Windows FireFox2、Opera8で確認)


var f = document.getElementById('***').onchange;
f();

IE6の場合はいったん変数に代入する必要があるようです。

QonClickで関数呼出し後に、結果に応じてsubmitを実行する方法

JavaScriptで、
function func() {
 if (a==0) {
  alert("処理しない");
  return false;
 }
 return true;
}
と、a=0ならfalseを返し、それ以外ならtrueを返す関数を定義しています。

そして、FORMタグで
<FORM NAME="FormName" ACTION="next.html">
<INPUT TYPE="button" VALUE="next" NAME="button1" onClick="return func();submit();">
</FORM>
と記述しています。
要は、ボタンを押下した際にfunc関数がtrueを返せば、next.htmlに
遷移させたいのですが、上記記述では、遷移しません・・・
onClick部分にonClick="return func(),submit();"と記述した場合、
func関数の実行結果がtrueでもfalseでも遷移してしまいます。
そこで、なんとなくonClick="return func()&&submit();"と記述してみたところ、
func関数がtrueの時のみうまく遷移するようになりました。

これは偶然そう動作しているのでしょうか、それとも上記は正しい記述方法なのでしょうか?
正しい記述方法ならいいのですが、上記以外に正式な記述方法があれば
教えていただけないでしょうか?

※TYPE="submit"にすればいいとは思うのですが、buttonで実現したいと
考えております。

JavaScriptで、
function func() {
 if (a==0) {
  alert("処理しない");
  return false;
 }
 return true;
}
と、a=0ならfalseを返し、それ以外ならtrueを返す関数を定義しています。

そして、FORMタグで
<FORM NAME="FormName" ACTION="next.html">
<INPUT TYPE="button" VALUE="next" NAME="button1" onClick="return func();submit();">
</FORM>
と記述しています。
要は、ボタンを押下した際にfunc関数がtrueを返せば、next.htmlに
遷移させたいのですが、上記記述では、遷移しませ...続きを読む

Aベストアンサー

3つのパターンをみる限り、理由は以下の通りと思います。
1.セミコロン(;)で区切った場合、
この場合、「return func();」と「submit();」とは別の文です。returnはその時点の値を戻して、それ以降の動作を打ち切ってしまいます。よって、onClickイベントはfuncメソッドの戻り値(true/false関係なく)を戻して、そこで終了、それ以降のsubmitは実行しないとなります。

2.カンマ(,)で区切った場合、
この場合、「return func(),submit();」が1つの文となります。この「,」は、左右の式を評価して、右式を結果とする演算子です。よって、funcメソッド、submitメソッド両方を評価するため、funcメソッドの戻り値に関係なく、submitされます。

3.&&で区切った場合、
論理演算子「&&」は、左右ともにtrue(0以外)の場合のみtrueとする演算子です。また、2項論理演算子は左式から評価し、左式だけで全体の結果がわかる場合、右式を評価しません。よって、funcメソッドがfalseを戻した場合、その時点でsubmitを評価しなくても演算結果は必ずfalseとなるのでそこで打ち切られ、trueを戻した場合、submitを評価しないと演算結果を得られないため、遷移したわけです。「&&」を「||(論理和)」に変更すると逆の結果得たと思います。

さて、では3の「&&」が正しいかと言われたら、文法上は正しいです。ただし、他人がみてわかるとは思えません。
そこで、以下の記述はいかがでしょう。読んでみてソースを理解できますか。


<FORM NAME="FormName" ACTION="next.html">
<INPUT TYPE="button" VALUE="next" NAME="button1" onClick="func()">
</FORM>

(中略)

// funcの定義
function func() {
 if (a==0) {
  alert("処理しない");
  return ;
 }
 document.FormName.submit();
}

要は、ボタンを押されたら、funcを呼び出せ。
funcでは、aが0ならば、そこで終了しろ。
そうでなければ、documentオブジェクト内のFormNameと言う名前のオブジェクトのsubmitメソッドを呼べ。
です。

3つのパターンをみる限り、理由は以下の通りと思います。
1.セミコロン(;)で区切った場合、
この場合、「return func();」と「submit();」とは別の文です。returnはその時点の値を戻して、それ以降の動作を打ち切ってしまいます。よって、onClickイベントはfuncメソッドの戻り値(true/false関係なく)を戻して、そこで終了、それ以降のsubmitは実行しないとなります。

2.カンマ(,)で区切った場合、
この場合、「return func(),submit();」が1つの文となります。この「,」は、左右の式を評価して、右...続きを読む

Qホームページでファイルをダウンロードさせる

お世話になります。
会社のホームページを制作中です。
マニュアルなどをアップしておき、ユーザーにダウンロードしてもらうページを作ろうと思っています。
<ベクターのような>
参考になる情報ありましたら教えてください。
宜しくお願いいたします。

Aベストアンサー

ダウンロードについて、
参考URLのページに分かりやすく書いてあるようです。
例もあるのでぜひ参考にしてください。

参考URL:http://www.tohoho-web.com/wwwxx013.htm

QCSSでreadonlyの機能はありますか?

ASPにてCSSを使用しています。
inputタグを読取専用(readonly)にしたいのですが、
スタイルシートでの指定の仕方がわかりません。
よろしくお願いします。

Aベストアンサー

> スタイルシートでも「IME-mode」の設定等、入力に関する制御も可能でしたので

それは某ブラウザが勝手に CSS を拡張して付けた機能で、本来の CSS ではそのようなことはできません。
CSS はあくまでも見た目つまりスタイルをデザインするためのものだと考えるべきです。

Qテキストボックスに数字しか入力できないようにするには?

タイトルの通りなのですが、あるテキストボックスに数字しか入力できないようにしたいのですが可能でしょうか?また、

「あいうえお 12345 「」:・、¥・」

というような文字列をコピーし、そのテキストボックスにペーストした際にも数字の12345だけが残るといった事も実現したいのですが…

どなたかご存知の方いらっしゃいましたら教えて頂けると幸いです。

Aベストアンサー

>英数字

では、こんな感じで

<input type="text" onKeyup="this.value=this.value.replace(/[^0-9a-z]+/i,'')">

Qhtmlでテーブル内にテキストボックスを作りたいのですが・・・

教えてください。

2行のテーブルを作ろうとしています。
1行目が項目で
2行目が入力できるようにしたいです。

入力できるようにしたいので
テーブル内にテキストボックスを作ったのですが
どうしてもテーブルを作る囲い線と
テキストボックスの右側の間に余白ができてしまいます。

テキストボックスの下にできる余白は
<form>
<table>
</table>
</form>
という感じで、テーブルをフォームで囲むことで
無くすことができました。

HTMLでこの余白を消せる方法がありましたら
ぜひ、教えてください。
よろしくお願いしますm(__)m

Aベストアンサー

ANo.1です。
「1行目が項目で2行目が入力」という事は、tableの構成は正しくはこうでしたね。

(省略)
<tr>
<th>項目名</th>
</tr>
<tr>
<td><input type="text" size="50" maxlength="100" name="hoge01" value=""></td>
</tr>
(省略)

失礼しました。でも、この結果でも同じですよ。

ただし…仮に、「項目名」に相当するデータのボリュームが、2行目の入力フィールドの長さより相対的に長くなってしまえば、当然余白はできますが。
そういう問題ではないですよね?

Q「関数が定義されていない」とのエラーが出る

こんにちは,よろしくお願いします。
何が何だか分からなくて困っています。
IEでは問題なく動くのに,Firefoxだと関数が定義されていないとのエラーが出ます。「<関数名> is not defined 」

スクリプトは,外部ファイル化してあります。キータイプの間違いもありません。何度も確認しました。

function aaa(){
 (スクリプト)
}

<body onload="aaa()">
のようにして呼び出しています。
いったい,何が悪いのでしょうか?

また,Operaだと,「リンク先のスクリプトを読み込むことができません」とのエラーが出ます。
元になるPHPファイルでは,
<script type="text/javascript" language="javascript" src="../javascript/AAAAA.js"></script>
のようにして呼び出しています。
もちろん,ファイルネームのタイプミスはありません。

ちなみに,スクリプトの内容は,日付関連のコードを記述しています。
試行錯誤している時に,他の日付関連のコードを実行したときに,
dayoption is not defined
というエラーが出たことがあります。
関数が存在しているのに,定義されていないと出るのは,もしかすると,日付関連の関数等の使い間違いではないかとも考えています。
使っているものは,Date()とgetYear()です。これらのうちのどちらかがFirefoxやOperaだとサポートされていないのでしょうか?

どうか御指導ください。よろしくお願いします。

こんにちは,よろしくお願いします。
何が何だか分からなくて困っています。
IEでは問題なく動くのに,Firefoxだと関数が定義されていないとのエラーが出ます。「<関数名> is not defined 」

スクリプトは,外部ファイル化してあります。キータイプの間違いもありません。何度も確認しました。

function aaa(){
 (スクリプト)
}

<body onload="aaa()">
のようにして呼び出しています。
いったい,何が悪いのでしょうか?

また,Operaだと,「リンク先のスクリプトを読み込むことが...続きを読む

Aベストアンサー

たぶんなんらかの凡ミスでしょうけど・・・・
firefoxでだめなら、firefoxのアドオンのfirebugで検証するのが一番です


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング