1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

テキストボックスの内容を取得・出力、ページ上までスクロール

Posted at

最近使ったjQueryの技:sparkles:をまとめます。その2
参考にしたサイトがたくさんになったけど、自分の理解力がなく、その分たくさん見て理解した感じ。
#お品書き

  • テキストボックスの内容を取得・・・.val();
  • jQueryで取得した内容をブラウザ上に出力・・・html()
  • ページの一番上までスクロールされるやつ・・・ $(window).scrollTop(0);

#テキストボックスの内容を取得する
新規会員登録ページなどで、入力後に内容を確認するページを挟む。この時点ではまだsubmitはされない。
送信していない内容を取得する方法???:thinking:
と悩んだので備忘録。
他にもいい方法があるかもですが・・・
##val()メソッド
HTMLのvalue属性を取得したり、変更できるメソッド
らしい。
あれ?value?バリューって何だっけってなったそこの私。
少し時間が空くとhtmlのform周りの属性はあやふやになってしまう。
(ついでにいえばQiitaのマークダウンの書き方もすぐ忘れちゃう。別ページに開くのではなく右上にいてほしかった・・・)

value属性で設定した値は初期入力値となる。

HTML的にはこう書いてあることが、多かった。
テキストボックスに表示される初期値を取得したいわけではないよ〜と思って混乱したけど。:disappointed_relieved:
value値はテキストボックスに入力した文字列へ初期値から変更される。

###使い方
対象となるHTML要素.val()が基本。

var getValue = $('#button').val();

#val()で取得した内容をブラウザ上に出力
###html()メソッド

「html()」を使うと、任意のHTML要素を取得したり意図的に要素を追加・書き換えをすることが出来ます

$('body').html(getValue);

これによってbody要素内に先程getValueで取得したvalue値を表示することができる。

ページの一番上までスクロールする

端っこのボタンをクリックするとページの一番上までスクロールするよく見るやつ。
id="button"のボタンを用意したとして。

    $('#button').click(function () {
        $(window).scrollTop(0);

なんて簡単。
windowに対して、指定したスクロール位置まで移動する。
一番上は0。

参考にしたサイト
【jQuery入門】val()によるvalue値の取得・変更・設定まとめ!
JavaScript テキストボックスの値を取得/設定する・・・val()だけじゃなくてgetElementByIdを使う方法もあるらしい!
jQueryのhtml()で追加・取得・書き換えの方法まとめ!
jQuery でテキストボックスの値を設定/取得/追記/削除を行う方法
【jQuery入門】scrollTop()で画面のスクロール位置を取得・設定する方法!

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?