如何使用Jquery从中继器内的文本框中选择文本

How to select the text from my textbox inside a repeater using Jquery?

本文关键字：文本 选择 何使用 Jquery 中继器      更新时间：2023-09-26

我有一个中继器，里面是一个文本框，包含我从数据库中获得的数据。当然，在运行时，它会生成大量数据，也就是说会生成大量文本框。

<asp:Repeater ID="rpter" runat="server">
  <ItemTemplate>
    <fieldset>
      <legend>
        <asp:Label ID="lblLegend" runat="server" Text='<%#DataBinder.Eval(Container,"DataItem.Name")%>' Font-Bold="true" />
      </legend>
      <div style="border: single, 1px;">
        <div>
          <asp:TextBox ID="txtMessage" runat="server" Text='<%#DataBinder.Eval(Container,"DataItem.Message")%>' Width="100%" TextMode="MultiLine"></asp:TextBox>
        </div>
       <div>
         <asp:Button ID="btnCopy" runat="server" Text="Copy" CommandName="Copy" OnClientClick="copyClipboard()" />
         </div>
      </div>
    </fieldset>
  </ItemTemplate>
</asp:Repeater>

我想要的是在单击复制按钮时从文本框中选择除复制按钮之外的文本，以便将其复制到剪贴板上。。

function copyClipboard() {
    CopiedTxt = document.selection.createRange();
    CopiedTxt.execCommand("Copy");
}

我必须编辑您的ASP代码，并将CssClass="txtMessage"添加到TextBox中
还有CssClass="btnCopy"到按钮
并删除了OnClientClick="copyClipboard（）"，因为我们将在jQuery中处理如下：

ASP:-

<asp:Repeater ID="rpter" runat="server">
    <ItemTemplate>
    <fieldset>
        <legend>
        <asp:Label ID="lblLegend" runat="server" Text='<%#DataBinder.Eval(Container,"DataItem.Name")%>' Font-Bold="true" />
        </legend>
        <div style="border: single, 1px;">
            <div>
                <asp:TextBox ID="txtMessage" runat="server" CssClass="txtMessage" Text='<%#DataBinder.Eval(Container,"DataItem.Message")%>' Width="100%" TextMode="MultiLine"></asp:TextBox>
            </div>
            <div>
                <asp:Button ID="btnCopy" runat="server" CssClass="btnCopy" Text="Copy" CommandName="Copy" />
            </div>
        </div>
    </fieldset>
    </ItemTemplate>
</asp:Repeater>

不要忘记包含jQuery库：

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

jQuery将处理对类为btnCopy的任何项目的所有单击，并在按钮
的父级的父级中查找.txtMessage项目并选择TextBox
中的文本返回false，这样你的点击就不会带你去任何地方。。。

jQuery：-

$(function () {
    $(".btnCopy").click(function (e) {
        $(this).parent().parent().find(".txtMessage").select();
        return false;
    });
});

我希望这对你有用，这是屏幕截图：
http://i59.tinypic.com/5ujvc9.jpg
http://i62.tinypic.com/35d4y7l.jpg

祝你好运；）

您需要将this传递给函数copyClipboard。所以你的按钮代码看起来像这个

<asp:Button ID="btnCopy" runat="server" Text="Copy" OnClientClick="copyClipboard(this)"/>

和一个类到你的div包装你的文本框，

<div class="texdiv">
  <asp:TextBox ID="txtMessage" runat="server" Text='<%#DataBinder.Eval(Container,"DataItem.Message")%>' Width="100%" TextMode="MultiLine"></asp:TextBox>
</div>

而你的js功能就是

function copyClipboard(th) {
            alert($(th).parents().prevAll('.texdiv').find('*[id^=rpter_txtMessage]').val());
        }

在客户端单击按钮时，您需要找到它以前的文本框，然后才能获得它的值它将为您提供相应的textbox值

$(function () {
    $(".copybtn").click (function (e) {
        Var txtMsgVal = $(this).parent().parent().find(".txtMsg").text();
        // Do something with the txtMsgVal here
        alert(txtMsgVal);
    });
});

您只需要在按钮和输入（消息）上都有一个class属性。

注意：我在这个答案中使用了jQuery，所以您必须在源代码中包含jQuery库。

祝你好运；）

相关文章：