テキストボックス内の特定の文字の場合の色変更

問い合わせフォームを作っております。

特定の文字列がテキストボックスにふくまれた場合（下記の例はリンゴ）
フォーカスが外れたときにその文字列の色を変更したいです。
アドバイス頂けたら幸いです。

<!DOCTYPE html> <html> <head> <title>文字の色を変える</title> </head> <body> <input type="text" value=""> <script src="http://code.jquery.com/jquery-2.2.3.min.js"></script> <script> $("text.value:contains('りんご')").css("color","#eea019"); </script> </body>

行動規範の内容に同意します

回答2件

ベストアンサー

質問がわかりませんが、テキストボックスの一部文字だけの
属性を変更することはできません

投稿2020/05/25 01:57

yambejp

総合スコア116835

あまりきれいな形ではないですが、おおむね以下のような書き方になると思います。

jQuery
1$(function() {
2  // 初期値、「<input type="text" value="りんご">」の場合
3  setColor();
4  
5  // 「<input type="text">」を変更したときに実行
6  $('input[type="text"]').on('change', function() {
7    setColor();
8  });
9}
10
11function setColor() {
12  if ($('input[type="text"]').val().indexOf('りんご') !== -1) {
13    // 「りんご」が含まれる場合
14    $('input[type="text"]').css('color', '#eea019');
15  }
16  else {
17    // 「りんご」が含まれない場合
18    $('input[type="text"]').removeAttr('style');
19  }
20}

$("text.value:contains('りんご')").css("color","#eea019");

text.valueの部分については、<text>タグのクラス名が「value」の要素、という意味になり
HTMLでいうと以下のような形でないといけません。

HTML
1<text class="value"></text>

:contains()が、inputなど閉じタグがない要素でも使用可能か、jQueryの仕様を調べたほうがよさそうです。
(現状、こちらの手元で<textarea>りんご</textarea>では実装できましたが、
<input type="text" value="りんご">では実装できませんでした。)

投稿2020/05/25 02:39

編集2020/05/25 03:04