3

在文本区域中，我有后续行，

hello world. <h2>sub heading</h2>
<img src="" alt="image.jpg"><h3>Test</h3>
More text
<img src="" alt="">

我希望能够单击一个按钮，将光标移动到空的 alt 属性。如果有“h”标签，那么它们的顺序是否正确。（应该先有 h1 标签，然后是 h2 标签）。如果它们的顺序不正确，则将光标移动到下一个“h”标签。（本示例将光标移动到 h2 标签）。最后光标将移动到最后一个 alt 属性。然后，如果我再次单击按钮，光标将再次移动到“h2”标签。我有以下代码，

<script type = "text/javascript">            
      (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);

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();
}
 else if(input.createTextRange){
 var range = elt.createTextRange();
 range.move('character', pos);
  range.select(); 
 }
 }

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

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

文本区域和按钮内的文本：

 <textarea id="textarea">
 hello world. <h2>sub heading</h2>
 <img src="" alt="image.jpg"><h3>Test</h3>
 More text
 <img src="" alt="">
 </textarea>
 <br>
 <a onclick="nextAlt($('#textarea'));">Next</a>

上面的代码在 IE 中不起作用（需要跨浏览器）。它将光标移动到不同的标签，但我想在将光标放置到特定位置之前使用不同的条件。例如，我想检查标题标签的顺序。如果使用了 h2 和 h3，那么它应该检查 h1 标签并将光标移动到 h2 标签。然后，如果用户再次单击该按钮，它将移动到 alt="" 属性（缺少替代文本）而不是 h3 标记，因为在 h2 之后标题标记的顺序是可以的。当用户再次单击按钮到达末尾时，光标将再次返回“h2”标签。有人可以帮我吗。谢谢

4

0 回答 0