Q&A
「入力内容をリアルタムに表示したい」どこに表示したいのか、読み取れません。
フォームの入力内容をリアルタムに表示したいです。
（１）
こちらのページによると↓
https://hacknote.jp/archives/6109/
これで出来るハズなのですが↓
https://jsfiddle.net/pe05trnm/
うまくいかず、、
これで出来るハズなのですが↓
https://jsfiddle.net/eqsqjd9d/
やはりううまくいってくれません。
他にもいろいろ検索したのですけれど、どうもjqueryばかりです。
今回はjavascriptでやりたいと思っているので、どなかた上の（１）（２）の修正点などご教示いただけませんでしょうか？
同じ表示ページ（別phpテンプレート）の、特定のクラスの中に表示させたいと思っています。
宜しくお願いいたします。
失礼いたいました。同じ表示ページ（別phpテンプレート）の、特定のクラスの中に表示させたいと思っています。
回答2件
0
こんにちは。
(1) の
これで出来るハズなのですが↓
https://jsfiddle.net/pe05trnm/
と書かれているコードの修正案を挙げる回答になります。
ご提示の
https://jsfiddle.net/pe05trnm/
をできるだけ少ない修正で、意図通りに動くようにしたものが以下です。
https://jsfiddle.net/jun68ykt/43eeqwpg/1/
修正点は以下の2点です。
1.alertValue を グローバルに参照できるように windowのプロパティにした。
2.<div>を、<input/> の閉じカッコ >の後に改行やスペースを入れず、直後にくるように移動
以下、上記2点の補足説明です。
修正点1.に関して
ご提示の
https://jsfiddle.net/pe05trnm/
の JS が jsfiddle 上ではどのようにページに埋め込まれるというと、
以下のようになっており、alertValue が
window.onloadに代入される関数値の本体ブロックに閉じ込められて
いるのが確認できます。
javascript
1<script type="text/javascript"> 2//<![CDATA[ 3window.onload=function(){ 4 function alertValue($this) { 5 $this.nextSibling.innerHTML = $this.value; 6 } 7}//]]> 8</script>
なお上記であることは、jsfiddle に
https://getfirebug.com/firebug-lite-debug.js
を、External resources に追加してから、Runしたときの HTMLを表示させると確認できます。
修正点2.に関して
上記の firebug-lite-debug.js を仕込めば、console.log を使えるので、
もとのコードの $this.nextSibling の参照する要素が何になっているかを、
console.logで出力して確認されるとよろしいかと思います。
参考：jsfiddleでconsole.logを出力しよう (bohebohechan@qiita)
以上参考になれば幸いです。
投稿2017/12/30 05:14
編集2017/12/30 06:45
総合スコア9058
とてもご丁寧に、わかりやすく、どうもありがとうございます。おかげさまでなんとかできました。わかりやすい&お優しい。jun68yktさんの部下はキチンと育ちそうですね。笑
今回は特定の位置に表示させる方法を教えてくださったKosuke_Shibuyaをベストアンサーにさせて頂きます。
「おかげさまでなんとかできました。」とのことで、よかったです！
0
ベストアンサー
html
1<!DOCTYPE HTML> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <div> 9 <input type="text" name="input" id="input" /> 10 </div> 11 <div id="response"> 12 13 </div> 14 <script type="text/javascript"> 15 var input = document.getElementById('input'); 16 input.addEventListener('keyup', function () { 17 var response = document.getElementById('response'); 18 response.textContent = this.value; 19 }); 20 </script> 21 </body> 22</html>
投稿2017/12/30 04:21
退会済みユーザー
総合スコア0
わ、すごい！ありがとうございます。できました！
ただ、完全に後出しで大変申し訳ないのですけれど、、
responseのところなのですが、idではなくclassにする方法ってありませんでしょうか？
getElementByIdをgetElementsByClassNameに換えてもできないようで、かなり謎です。
置き換えるだけではダメです。
getElementById と getElementsByClassName は返す値が異なります。id は単数形のElement であるのに対し、classは Elements の複数形になっていることに注意。getElementsByClassName はHTML要素の配列を返します。
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByClassName
var response = document.getElementById('response')[0]; のように、序数を引数にアクセスしなければなりません。
すでにclassでいろいろ作っており変更が難しかったのですが、そのclassの中にご提示のidを入れて、なんとかこなしました。複数形とか難しいですね。たびたびありがとうございます。
たびたびすみません。こちらの部分なんですけれど、
<div>
<input type="text" name="input" id="input" />
</div>
wordpressの記事本文をこちらの部分にすることは可能でしょうか？
つまり、記事本文の投稿画面に入力した文字が、リアルタイムで表示されるようにしたいのです。
「記事本文の投稿画面」のHTMLに合わせてやれば問題ないです。
あ、すると、
<div>
<input type="text" name="input" id="input" />
</div>
を変えるのではなくて、こちらの部分は消して、ｊｓの部分で「投稿画面を表示してね」と書くわけですね。ありがとうございます。チャレンジしてみます。
いろいろそれらしくアレンジしてみたのですけれど、こういう当てはめ方でよろしいのでしょうか？
https://www.fastpic.jp/images.php?file=1888114567.jpg
それともひょっとして、jsの書き方が根本的に違いますか？
問題ないように見えますが、何に困っているんですか？
年末だというのにすみません。。(;´∀｀)
ご返信ありがとうございます。
上の画像の記述ですと、responceの部分にリアルタム表示がされないのです。
投稿画面に入力されたテキストをリアルタイムでresponceに表示したいと思いアレンジしてみたのですが、これであっているのですね。うーん、なぜできないのか、、
厄介なことになってきました。引き続き検索したりしてみます。もし何か思いつくヒントがあればまたご返信くださいませ。
実際のコードを見ない限り回答なんてできませんよ
すみません。大変申し訳ございません。上の画像の書き方であっていました。idが間違っていただけでした。お騒がせしました。何度も本当にありがとうございます。
あなたの回答
tips
プレビュー
