質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.64%

ジャバスクリプト テキストエリア内の選択した文字列をフォーカスしたい

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 3
  • VIEW 572

cyokucyoku

score 2

 前提・実現したいこと

テキストエリアに結構長い文章が入っています。
テキストボックスに入れた文字列がテキストエリアの中の文章にあるかどうかを検索し、あれば文字列を選択した状態にした後、その文字列の場所をフォーカスしたいです。

テキストボックスに入れた文字列を検索し、文字列を選択するところまではできました。
検索した文字列が今表示されているテキストエリアの範囲内にある場合は、文字列が選択されている状態なのですぐにわかるのですが、文字列が文章の最後のほうにある場合、選択された文字列を見つけるには、スクロールバーでテキストエリア内の文章を送らないと見つけることができません。

そこで、検索した文字列が文章の最後のほうにある場合でも、自動的にテキストエリア内の文章がその文字列があるところにフォーカスするような動きに直したいのです。

どうぞよろしくお願いします。

※文字列を選択させなければ、検索した文字列が文章の最後のほうにあっても、自動的にテキストエリア内の文章が文字列があるところにフォーカスされます。

 発生している問題・エラーメッセージ

 該当のソースコード

ソースコード

function FirstSearch(){

//「KensakuMoji」にテキストボックスに入れた文字列の値をセット
var KensakuMoji = document.getElementById("txtb").value;
    //alert("KensakuMojiは"+ KensakuMoji); 

//regに「g」フラグを設定し、正規表現の文字列検索をセットする
reg = new RegExp(KensakuMoji, "g");

//「Txt_1」に、テキストエリアの文章をセット
var Txt_1=document.getElementById("Txt_Bun").value;

//検索文字がテキストエリアの文章の中にあるか正規表現で検索
var result = Txt_1.match(reg);

if(result != null) {
    //alert("文字列が見つかりました"); 

    //Searchで文書頭から文字列を検索し、見つかった文字の位置を取得
           var Ichi_First = Txt_1.search(reg);
    //alert("Ichi_Firstは"+ Ichi_First); 

    //検索した文字列を選択する
    document.getElementById("Txt_Bun").setSelectionRange(Ichi_First, Ichi_First + 1); 

//document.getElementById("Txt_Bun").setSelectionRange(Ichi_First, Ichi_First); 


//↑ここで「(Ichi_First, Ichi_First + 1)」を「(Ichi_First, Ichi_First)」にして、文字列を選択するようにしなければ、文章の最後のほうに検索文字列があっても、テキストエリア内の文章が自動的に検索文字列にフォーカスされます


    //カーソルがある位置のテキストエリアを表示するため
    //テキストエリアをフォーカスし直す
     document.getElementById("Txt_Bun").focus();

}else{
    //検索したい文字が見つからない場合
    alert("文字列が見つかりませんでした"); 

    //テキストエリアをフォーカスし直す
     document.getElementById("txtb").focus();
     document.getElementById("Txt_Bun").focus();
}
}
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="Shift_JIS">
    <title></title>

    <link rel="stylesheet" type="text/css" href="Check.css" media="all">

    <script type="text/javascript" src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="searchhi_slim.js"></script>


<style>
</style>


</head>


<body>

    文字列:<input type="txt" id="txtb"><br>
    <input type="button" value="検索" onclick="FirstSearch()">

</DIV>



<DIV style="margin-left:35%;">
    <input type="file" id="loadFile" size="106"><br>
    <textarea id="Txt_Bun" rows="30" cols="81"  style="font-size:1em;"></textarea>

</DIV>









<!-- スクリプト -->

<script type="text/javascript" src="Kensaku111.js" charset="Shift_JIS"></script>




</body>
</html>


```

 試したこと

いろいろなサイトを検索してみましたが、解決しませんでした。

 補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2018/02/22 12:20

    HTMLも提示いただけませんか?あと質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

    キャンセル

  • cyokucyoku

    2018/02/22 17:44

    HTMLも載せました。よろしくお願いします。

    キャンセル

回答 1

+4

複数箇所見つかった場合とかどうするかはおいておいて
テキストエリアから文字をフォーカスする

$(function(){
  $('[type=button][value=search]').on('click',function(e){
    var v1= $('#hoge').val();
    var v2= $('#fuga').val();
    var start=v2.indexOf(v1);
    var end=start+v1.length;
    $('#fuga')
      .prop({"selectionStart":start,"selectionEnd":end})
      .trigger("focus");
  });
});
<input type="text" id="hoge" value="ここ">
<input type="button" value="search">
<hr>
<textarea id="fuga">
ほげほげほげほげほげ
ほげほげほげほげほげ
ほげほげほげほげほげ
ほげほげほげほげほげ
ほげほげほげほげほげ
ほげほげほげほげほげ
ほげほげほげほげほげ
ほげほげほげほげほげ
ほげほげほげほげほげ
ほげほげほげほげほげ
ほげほげほげほげほげ
ほげほげほげほげほげ
ほげほげほげほげほげ
ほげほげほげほげほげ
ほげほげほげほげほげ
ほげほげほげほげほげ
ほげほげほげほげほげ
ほげほげほげほげほげ
ほげほげほげほげほげ
ほげほげほげほげほげ
ほげほげほげほげほげ
ほげほげほげほげほげ
ほげほげほげほげほげ
ほげほげほげほげほげ
ほげほげほげほげほげ
ほげほげほげほげほげ
ほげほげほげほげほげ
ほげほ ここ ほげほげ
ほげほげほげほげほげ
ほげほげほげほげほげ
</textarea>

 追記

ピュアなjavascriptで書くとこうです

window.addEventListener('DOMContentLoaded', function(e){
  document.querySelector('[type=button][value=search]').addEventListener('click',function(e){
    var v1= document.querySelector('#hoge').value;
    var v2= document.querySelector('#fuga').value;
    var start=v2.indexOf(v1);
    var end=start+v1.length;
    with(document.querySelector('#fuga')){
      selectionStart=start;
      selectionEnd=end;
      focus();
    }
  });
});

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/02/22 11:24

    回答を書いてくださったのに御返事がおそくなり、申し訳ありません。
    ピュアなjavascriptバージョンのものを試してみました。

    が、「ここ」という単語は選択した状態になるのですが、テキスト
    エリアは初めの方の文章が表示されるので、スクロールバーで送ら
    なければ「ここ」が選択されていることがわかりません。

    IE11で動かしているのですが、その辺が関係ありますか?
    ちなみに、Google Chromeでも同じような状態でした。

    キャンセル

  • 2018/02/22 17:56

    横から失礼します。
    textarea内の自動折り返しの分は、textareaの幅とフォントサイズなどで計算が必要そうですが、
    下記URLを参考にいけそうな気がします。

    https://gist.github.com/taoyag/2137278
    http://javascript123.seesaa.net/article/139520404.html

    キャンセル

  • 2018/02/27 11:22

    返信が遅くなり、申し訳ありません。
    回答をありがとうございます。
    教えていただいたサイトを見ました。できるかどうかわかりませんが、
    とりあえずやってみます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.64%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる