Home/ Questions/Q 9312427
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-19T01:37:40+00:00

i am working on this project where i press a button that will look

  • 0

enter image description herei am working on this project where i press a button that will look for specific words in the textarea(may be move the cursor to that specific word). i tried many things but so far no luck.
here what i am trying to do.

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

the textArea is in php page, test.php 

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

when i run test.php i will see the following inside the textarea.

<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

The find next button will find any image that has no alternative text.
I know i need js or jquery. I am new to this. so Don’t know really where to start. please help.
thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Solution 1: Find next empty alt-attribute

    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>

    Demo

    http://jsfiddle.net/rMqbW/

    I’ve build this based on the accepted answer from this question:

    jQuery Set Cursor Position in Text Area

    Solution 2: Go through all HTML-tags

    This is the updated JavaScript to skip through all HTML opening tags. I only posted the updated/new parts.

    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);
    }
}

    Demo

    http://jsfiddle.net/TmeV3/

    This one uses a solution from How can i get cursor position in a textarea? and a regex from Create a Javascript RegExp to find opening tags in HTML/php template.

    • 0