使用 jQuery 将文本添加到 asp.net 文本框控件 [英] add text to an asp.net textbox control with jQuery

问题描述

在网络表单中，我有一些输入字段

<div class="forminput">标签 1 <br/><input type="text" name="Field1" value="" size="20"/>
<div class="forminput">标签 2 <br/><input type="text" name="Field2" value="" size="20"/>

当焦点在控件上丢失时，输入的值需要返回到 asp.net 文本框控件.我已经能够使用以下代码将值传递给 div 层或标准 html 元素:

 函数 fieldUpdate() {var currentValue = $(this).val();var field = $(this).attr("name");如果(当前值！="){$("#results").append(field + ":" + currentValue + "+");}}$(函数(){$("#search1 :input[type=text]").focusout(fieldUpdate);});

然而，这似乎不适用于 asp.net 服务器端控件.更新这个问题的目的是将输入到标准 html 输入字段的值提供到 asp:textbox 控件中

<asp:TextBox ID="results2" Text="" Width="400" runat="server"/>

更新下面是当前解决方案如何工作的屏幕截图.在顶部，当用户输入一个值时，您会看到输入字段，并从每个字段中跳出该值，该值被添加到标记为结果的 Div 层中.我想要做的不是将字段名和值添加到 DIV 元素，而是希望将它们添加到 asp:textbox 控件.

最好将此代码存储在外部 js 文件中，而不是存储在 aspx 页面中.

任何人都可以提供有关如何完成此操作的任何建议吗?

提前致谢

更新解决方案感谢 James 帮助我完成这项工作.以下是当前实现中使用的 jQuery 代码.

function fieldUpdate() {var currentValue = $(this).val();var field = $(this).attr("name");var txt = $("#<%=results2.ClientID%>");如果(当前值！="){$("#results").append(field + ":" + currentValue + "+");如果(txt){txt.val(txt.val() + field + ":" + $(this).val() + "+");}}}$(函数(){//仅评估输入文本字段$("#search1 :input[type=text]").focusout(fieldUpdate);

这将允许使用输入字段名称和值填充 asp:textbox.示例 Field1:foo+Field2:somevalue2+Field3:somevalue3 ...

解决方案

那些不是 ASP.NET TextBox 控件；它们是 HTML 文本输入.不过，要回答您的问题，您可以这样做:

<input type="text" id="input1"/>

我注意到您在示例中设置的是名称而不是 ID.如果您有选择，我会使用 ID，但您可以通过名称查找元素，如下所示:

$("input[name='Field1']").val("Hello world");

如果您使用实际的 ASP.NET TextBox 控件，则解决方案会有所不同:

<asp:TextBox ID="TextBox1" runat="server"/>

如果您想获取 search1 div 中的所有文本输入，您可以这样做:

$(".forminput input[type='text']").val("Hello world!");

这是上述示例的 jsFiddle:http://jsfiddle.net/DWYTR/

编辑

根据您的评论，以下是如何在 blur 上将值从一个输入复制到另一个输入:

$(".forminput input[type='text']").blur(function(){var txt = $("#<%=TextBox1.ClientID%>");如果(txt){txt.val(txt.val() + $(this).val());}});

Within an web form I have a some input fields

<div id="search1">
        <div class="forminput">
            Label 1<br />
            <input type="text" name="Field1" value="" size="20" />
        </div>
        <div class="forminput">
            Label 2<br />
            <input type="text" name="Field2" value="" size="20" />
        </div>
</div>

As focus is lost on the control the value entered needs to be returned to an asp.net textbox control. I have been able to pass the values to a div layer or standard html element using the following code:

    function fieldUpdate() {

            var currentValue = $(this).val();
            var field = $(this).attr("name");

                if (currentValue != "") {
                    $("#results").append(field + ":" + currentValue + "+");
                }
        }
 $(function () {
            $("#search1 :input[type=text]").focusout(fieldUpdate);

        });

However this does not seem to work with an asp.net server side control. Update The objective of this question is to provision the values entered into standard html input fields into an asp:textbox control

<asp:TextBox ID="results2" Text="" Width="400" runat="server" />

Update Below is a screenshot of how the current solution works. At the top you see teh input fields as a user enters a value and tabs out of each field this value is added to a Div layer labeled results. What I want to do is instead of adding the fieldname and value to a DIV element I want them to instead be added to a asp:textbox control.

It is preferred to have this code stored within an external js file vs within the aspx page.

Can anyone provide any suggestions on how to accomplish this?

thanks in advance

Update Solution Thanks to James for helping me work though this. Below is the jQuery code as used in the current implementation.

function fieldUpdate() {

            var currentValue = $(this).val();
            var field = $(this).attr("name");
            var txt = $("#<%=results2.ClientID%>");
                if (currentValue != "") {
                    $("#results").append(field + ":" + currentValue + "+");
                    if (txt) {
                        txt.val(txt.val() + field + ":" + $(this).val() + "+");
                    }
                }
        }


        $(function () {
        //only evaluate input text field
            $("#search1 :input[type=text]").focusout(fieldUpdate);

This will now allow an asp:textbox to be populated with the input field name and value. Example Field1:foo+Field2:somevalue2+Field3:somevalue3 ...

解决方案

Those are not ASP.NET TextBox controls; they're HTML text inputs. To answer your question though, you would do this:

<script type="text/javascript">
    $(function(){
        $("#input1").val("Hello world");
    });
</script>
<input type="text" id="input1" />

I noticed that you're setting the name instead of the ID in your example. I would use ID if you have a choice, but you can find an element by name like this:

$("input[name='Field1']").val("Hello world");

If you use an actual ASP.NET TextBox control, the solution will be a little different:

<script type="text/javascript">
    $(function(){
        $("#<%=TextBox1.ClientID%>").val("Hello world");
    });
</script>
<asp:TextBox ID="TextBox1" runat="server" />

If you want to get all of the text inputs in the search1 div, you can do this:

$(".forminput input[type='text']").val("Hello world!");

Here's a jsFiddle for the above example: http://jsfiddle.net/DWYTR/

EDIT

Per your comment, here is how you can copy a value from one input to another on blur:

$(".forminput input[type='text']").blur(function(){
    var txt = $("#<%=TextBox1.ClientID%>");
    if (txt){
        txt.val(txt.val() + $(this).val());
    }
});

这篇关于使用 jQuery 将文本添加到 asp.net 文本框控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！