按钮单击文本区域上的焦点文本[关闭]答案

【问题标题】：button click focus text on textarea [closed]按钮单击文本区域上的焦点文本[关闭]
【发布时间】：2013-02-17 23:03:13
【问题描述】：

我正在做这个项目，我按下一个按钮，将在文本区域中查找特定单词（可能将光标移动到该特定单词）。我尝试了很多东西，但到目前为止没有运气。这就是我想要做的。

$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。我是新来的。所以真的不知道从哪里开始。请帮忙。谢谢

【问题讨论】：

你想完成什么？在您的 html/php 文件中找到没有 alt 属性的 img 标签？
是的，在 html/php 文件中没有 alt 属性的 img 标签和没有 alt 属性的 img 标签在 textarea 内。

标签： php javascript

【解决方案1】：

解决方案1：找到下一个空`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>

演示

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 的正则表达式。

【讨论】：

我复制了您的代码并尝试运行它，但它对我不起作用。我在 jsfiddle.net 中看到了你的代码，它很完美……:(
您的控制台中是否收到任何错误消息？你是否包含了 jQuery 库？
没有收到任何错误。单击下一步按钮，它没有做任何事情。没有添加 jquery 库。抱歉，我是新手……不知道要添加什么……
只需将其添加到 HTML/PHP 文件的 head 部分：<script type="text/javascript">document.write("\<script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'>\<\/script>");</script>。
非常感谢。它完美无缺。关于您的解决方案的另一个问题。例如，如果我想通过单击“下一步”找到 alt="image.png"，然后找到 alt=""，我该怎么做。

解决方案1：找到下一个空alt-attribute

解决方案 2：遍历所有 HTML 标记

解决方案1：找到下一个空`alt`-attribute