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

user1825190
  • 117
  • 1
  • 11

1 Answers1

1

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.

Community
  • 1
  • 1
insertusernamehere
  • 23,204
  • 9
  • 87
  • 126
  • i copy your code and try to run it but it's not working for me. i seen your code in jsfiddle.net and it's perfect...:( – user1825190 Feb 17 '13 at 23:54
  • Do you get any error messages in your console? Did you include the jQuery library? – insertusernamehere Feb 17 '13 at 23:55
  • did not get any error. click the next button and it did not do anything. didnt add jquery lib. sorry i am new to this.. dont know what to add... – user1825190 Feb 17 '13 at 23:57
  • Simply add this in the `head`-section of your HTML/PHP-file: ``. – insertusernamehere Feb 18 '13 at 00:01
  • thanks a lot. it works perfect. one more question regarding your solution. for example if i want to find alt="image.png" and then alt="" by clicking "next" how can i do it. – user1825190 Feb 18 '13 at 00:07
  • I'm glad it's woking now. If you want to skip through all alt-Attributes you could use `alt="` instead of `alt=""`. – insertusernamehere Feb 18 '13 at 00:09
  • i dont want to skip. what i am trying to do is find different elements for example empty alt, find h1 tag, find nav tag etc. is there anyway to click next button that you used and it will find all them tag one by one. i was trying to manipulate your code to find alt attribute that is not empty and alt those are empty. it went straight to very last alt. – user1825190 Feb 18 '13 at 00:17
  • all i can say is thanks a million :) – user1825190 Feb 18 '13 at 04:08
  • i tried it in chrome and ff works fine but does not move the cursor to all the elements in IE9. any solution. thax – user1825190 Feb 18 '13 at 04:30