9cubed
ブログ | PHP | JavaScript | TypeScript | Vue.js | Laravel | Tailwind | Vite | Python | MariaDB | SQLite | Node.js | Linux | PowerShell | Docker | Git | Web | その他
< 前の記事

jQuery - イベントでのアロー関数(ラムダ式)の使用について

次の記事 >

jQuery - submitイベント

jQuery

jQuery - selectイベント

公開日:2018-12-21
更新日:2019-05-14

1. 概要

テキストボックスの文字列を選択すると、selectイベントが発生します。

$("#text1").on("select", function(e) {
	処理;
});

2. サンプル

テキストを選択すると、メッセージが表示されます。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

  <input    id="text1" type="text" value="1234567890" /><br /><br />
  <textarea id="text2" cols="40" rows="5">1234567890</textarea>
  <div id="msg"></div>

  <script>

    $("#text1").on("select", function(e) {
      $("#msg").html("input のテキストが選択されました。");
    });

    $("#text2").on("select", function(e) {
      $("#msg").html("textarea のテキストが選択されました。");
    });

  </script>
</body></html>

実行結果:画面



< 前の記事

jQuery - イベントでのアロー関数(ラムダ式)の使用について

次の記事 >

jQuery - submitイベント

YouTube X

新着一覧

  • async、awaitJavaScript
  • Promise についてJavaScript
  • パッケージの管理Node.js
  • v-model(双方向バインディング)Vue.js
  • VS Code で GitHub を使ったソース管理Git
  • computed(再計算)Vue.js
  • watchDebounced(値の監視)Vue.js
  • watch(値の監視)Vue.js
  • change イベントVue.js
  • v-memoVue.js

アーカイブ

  • 2026/03
  • 2026/02
  • 2026/01
  • 2025/12
  • 2025/11
  • 2025/10
  • 2025/09
  • 2025/08
  • /00

以前のカテゴリー一覧

  • CakePHP3
  • CentOS7
  • HTML・CSS・JavaScript
  • Haskell
  • JavaScript
  • Kotlin
  • Laravel5
  • PHP
  • Python
  • Ruby
  • RubyOnRails5
  • TypeScript
  • Vue.js
  • Webサーバ講座
  • Webプログラミング講座
  • jQuery
  • linux
  • パソコン講座
  • ブログ
  • プログラミング講座
  • メモ帳作成講座
  • 数学

Copyright © 9cubed. All Rights Reserved.

プライバシーポリシー 利用規約
▲