【JavaScript・jQuery】textフォームの入力内容を連動させよう！

2023年5月14日

今回はプログラムを記述する中での疑問に答えていきたいと思います。

実際に例となるプログラムコードとそのプログラムが実現する挙動を確認していきましょう！

textフォームの入力内容を連動させるには？
プログラム例
- HTML
- JavaScript
動かしてみよう！
まとめ

textフォームの入力内容を連動させるには？

プログラムを書く中で、このようなことで詰まったことはないでしょうか。

2つのテキストフォームがあります。

その片方に入力した内容をリアルタイムに、もう片方にも反映させるにはどうすれば良いのでしょうか？

今回はこの疑問にお答えしていきます。

プログラム例

では、今回の機能を実現するプログラム例をご紹介します。

それぞれのinputタグのidを指定して連動させている事が分かりますね。

HTML

<html>
　<body>
　　<input type="text" id="testText1" value="">
　　<input type="text" id="testText2" value="">
　</body>
</html>

<html>

　<body>

　</body>

</html>

JavaScript

<script>
　var $testText1 = $('#testText1');
　var $testText2 = $('#testText2');
　$testText1.on('keyup change',function(){
　　$testText2.val($testText1.val());
　})
　$testText2.on('keyup change',function(){
　　$testText1.val($testText2.val());
　})
</script>

　var $testText1 = $('#testText1');

　var $testText2 = $('#testText2');

　$testText1.on('keyup change',function(){

　　$testText2.val($testText1.val());

　})

　$testText2.on('keyup change',function(){

　　$testText1.val($testText2.val());

　})

</script>

動かしてみよう！

では実際に今回書いたプログラムでどのような挙動をするのか確かめてみましょう。

「testText1」に何か文字を入力すると、「testText2」に即座に同様の内容が反映されます。

実際に動きを見て実現したいことと合っているのか、確認してみてくださいね。

testText1：

testText2：

[myInclude file='tenkake_js/tenkake_js.js']

まとめ

HTMLを用いたtextフォームの入力内容を連動させるために、今回はJavaScriptの記述をご紹介してきました。

役立てていただけると嬉しいです。

最後までお読みいただきありがとうございました！