0

ここに画像の説明を入力してください私はこのプロジェクトに取り組んでおり、テキストエリアで特定の単語を探すボタンを押します（カーソルをその特定の単語に移動する可能性があります）。私は多くのことを試みましたが、今のところ運がありません。ここで私がやろうとしていること。

$line ="<html>
<head>
<title>Drum studio home</title>
<body>
<img src="/images/fo.png" alt=""/>
</body>
</html> ";

textAreaはphpページtest.phpにあります

<textarea name="tvalue" id="tvalue">
                              <?php                                  
                                  echo $line . "\r\n";                                                                 
                              ?>
</textarea>
<input type="submit" value="find next" name="submit"/>

test.phpを実行すると、テキストエリア内に次のように表示されます。

<html>
<head>
<title>Drum studio home</title>
<body>
<img src="/images/fo.png" alt=""/>
<img src="/images/fo.png" alt="fo image"/>
</body>
</html> 

**find next**  --- this is the button

[次を検索]ボタンは、代替テキストがない画像を検索します。私はjsまたはjqueryが必要であることを知っています。私はこれに不慣れです。だからどこから始めればいいのかわからない。助けてください。ありがとう

4

1 に答える 1

1

解決策1：次の空の属性をalt見つける

JavaScript

function setSelectionRange(input, selectionStart, selectionEnd) {
  if (input.setSelectionRange) {
    input.focus();
    input.setSelectionRange(selectionStart, selectionEnd);
  }
  else if (input.createTextRange) {
    var range = input.createTextRange();
    range.collapse(true);
    range.moveEnd('character', selectionEnd);
    range.moveStart('character', selectionStart);
    range.select();
  }
}

function setCaretToPos (input, pos) {
  setSelectionRange(input, pos, pos);
}

function nextAlt(input) {
    pos = input.val().indexOf('alt=""');
    if (-1 == pos) {
        alert("None found");
    } else {
        setCaretToPos(input.get(0), pos);
    }
}

HTML

<textarea id="textarea">
    Some sample text.
    <img src="" alt="">
    More text
    <img src="" alt="">
</textarea>
<br>
<a onclick="nextAlt($('#textarea'));">Next</a>

デモ

http://jsfiddle.net/rMqbW/

私はこの質問から受け入れられた答えに基づいてこれを構築しました：

jQueryはテキスト領域にカーソル位置を設定します

解決策2：すべてのHTMLタグを確認する

これは、すべてのHTML開始タグをスキップするように更新されたJavaScriptです。更新/新規パーツのみ掲載しました。

javaScript

// new
(function ($, undefined) {
    $.fn.getCursorPosition = function() {
        var el = $(this).get(0);
        var pos = 0;
        if('selectionStart' in el) {
            pos = el.selectionStart;
        } else if('selection' in document) {
            el.focus();
            var Sel = document.selection.createRange();
            var SelLength = document.selection.createRange().text.length;
            Sel.moveStart('character', -el.value.length);
            pos = Sel.text.length - SelLength;
        }
        return pos;
    }
})(jQuery);

// updated
function nextAlt(input) {
    var current = input.getCursorPosition();
    var search = input.val().substr( ( 0 == current ? 0 : current + 1 ) );
    var pos = current + search.search(/<[a-zA-Z]+(>|.*?[^?]>)/) + 1;
    if (-1 == pos) {
        alert("No elements found");
    } else {
        setCaretToPos(input.get(0), pos);
    }
}

デモ

http://jsfiddle.net/TmeV3/

これは、テキストエリアでカーソル位置を取得するにはどうすればよいですか？のソリューションを使用しています。また、「Javascript RegExpの作成」からの正規表現を使用して、HTML/phpテンプレートで開始タグを検索します。

于 2013-02-17T23:42:41.313 に答える