使用 JavaScript 检索文本框答案

【问题标题】：Retrieve a TextBox using JavaScript使用 JavaScript 检索文本框
【发布时间】：2011-01-03 08:02:11
【问题描述】：

我有一个处于编辑模式的 GirdView，里面有一个 TextBox。

我需要在 JavaScript 中检索这个带有 ID（来自浏览器中的源代码）的 TextBox。

ctl00$MainContent$uxListOptions$ctl02$uxValueInput

但我收到一个错误，因为我的 JavaScript 无法找到 TextBox。

代码如下：

   <span onclick="encodeMyHtml('<%# UniqueID.Replace("$", "_") %>_FormViewContentManager_ContentTextBox')">
        <asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True" CommandName="Update" Text="[Publish]" />
    </span>

在我的控件的 OnPageLoad 中，我称之为：

private void addEditorJavaScript()
{
    // create our HTML encoder javascript function
    // this way it shows up once per page that the control is on
    string scr = @"<script type='text/javascript'>function encodeMyHtml(name){
                var content = document.getElementById(name).value
                content = content.replace(/</g,'<');
                content = content.replace(/>/g,'>');
                document.getElementById(name).value = content;
            }</script>";

    // add the javascript into the Page
    ClientScriptManager cm = Page.ClientScript;
    cm.RegisterClientScriptBlock(this.GetType(), "GlobalJavascript", scr);
}

我正在尝试使用此代码http://dustyreagan.com/how-to-submit-html-without-disabling/

任何想法我做错了什么？谢谢大家！

【问题讨论】：

首先，将UniqueID.Replace("$", "_")替换为ClientID。不会解决您的问题，但它看起来更好，并且在约定发生变化时不太容易失败。
你好，从浏览器源我可以看到我感兴趣的文本框 textarea name="ctl00$MainContent$uxListOptions$ctl02$uxValueInput" rows="2" cols="20" id=" MainContent_uxListOptions_uxValueInput_0" class="mceEditor"> <p>ciao</p>
但我无法在 JavaScript 中检索它，有什么想法吗？谢谢

标签： c# javascript gridview textbox

【解决方案1】：

如果您使用的是 ASP.Net 4.0，则可以为此控件使用 ClientIdMode=Static 或 Predictable。

【讨论】：

【解决方案2】：

encodeMyHtml('<%# UniqueID.Replace("$", "_") %>_FormViewContentManager_ContentTextBox')

这将导致

encodeMyHtml('ctl00_MainContent_uxListOptions_ctl02_uxValueInput_FormViewContentManager_ContentTextBox')

您的 DOM 中是否存在对该 ID 的控件？

您似乎对如何创建 ID 做出了很多假设。最好直接引用ContentTextBox.ClientID。

类似于以下内容，前提是 ContentTextBox 是对文本框的有效引用：

encodeMyHtml('<%# ContentTextBox.ClientID %>')

【讨论】：

嗨，我如何检查 DOM 中是否存在 id ID？

【解决方案3】：

你可以这样定义你的网格：

 <div>
   <asp:GridView ID="GridView1" runat="server"  Width = "550px"
    AutoGenerateColumns = "false" Font-Names = "Calibri" 
    Font-Size = "12pt" HeaderStyle-BackColor = "LightYellow" AllowPaging ="true"  ShowFooter = "true"  OnPageIndexChanging = "OnPaging" PageSize = "10" >
   <Columns>
      <asp:TemplateField ItemStyle-Width = "100px"  HeaderText = "Name">
        <ItemTemplate>
         <asp:TextBox ID="txtPeriod" runat="server" CssClass="css1 mycss" Text='<%# Eval("Period")%>' 
             onblur="SetPostingPeriod(this)"></asp:TextBox>
        </ItemTemplate>                       
    </asp:TemplateField>   
   </Columns> 
   <AlternatingRowStyle BackColor="#C2D69B"  />
</asp:GridView> 
</div>

您的 Javascript 函数将是：

<script language="javascript" type="text/javascript">
     /* Populating same data to all the textboxes inside grid, 
     once change of text for one textbox - by using jquery
     */
     function SetPostingPeriod(obj) {

         var cntNbr = $("#" + obj.id).val();
      // var cntNbr = document.getElementById(obj.id).value;
      // alert(cntNbr);

         //Access Grid element by using name selector
         $("#<%=GridView1.ClientID %> input[name*='txtPeriod']").each(function (index) {

             if ($.trim($(this).val()) != "")
                 if (!isNaN($(this).val())) {
                     $(this).val(cntNbr);
                 }
         });
     }
 </script>

这个 Javascript 函数被称为文本框的 onblur 事件。当这个函数被同时调用时，它会传递一个参数这不过是文本框 id。

在javascript函数中使用参数是我们正在获取值的文本框的 id。

代码如下：

      var cntNbr = $("#" + obj.id).val();

然后对于网格内可用的每个“txtPeriod”控件，我们需要分配当前“txtPeriod”文本框值的值。

循环网格以识别每个可用的“txtPeriod”：这是代码：

 $("#<%=GridView1.ClientID %> input[name*='txtPeriod']").each(function (index) {

 });

在这个循环中，我们需要将“txtPeriod”（当前/修改）值分配给其他 "txtPeriod" 文本框。在分配其良好做法之前检查它是 null 还是 NAN。

代码如下：

               if ($.trim($(this).val()) != "")
                 if (!isNaN($(this).val())) {
                     $(this).val(cntNbr);
                 }

【讨论】：