按钮单击textarea上的焦点文本

时间：2013-02-17 23:03:13

标签： php javascript

enter image description here我正在研究这个项目，我按下一个按钮，查找textarea中的特定单词（可能是将光标移动到该特定单词）。我尝试了很多东西，但到目前为止没有运气。 在这里我想做什么。

$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时，我会在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

“查找下一个”按钮将找到没有替代文本的任何图像。 我知道我需要js或jquery。我是新来的。所以不知道从哪里开始。请帮忙。 感谢

1 个答案:

答案 0 :(得分：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 Set Cursor Position in Text Area

解决方案2：浏览所有HTML标记

这是更新的JavaScript，可以跳过所有HTML开始标记。我只发布了更新的/新的部分。

<强>的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/

这个使用来自How can i get cursor position in a textarea?的解决方案和来自Create a Javascript RegExp to find opening tags in HTML/php template的正则表达式。

相关问题
最新问题