在 jQuery 中填充文本框时执行 javascript 函数？答案

【问题标题】：Execute a javascript function when textbox is populated in jQuery?在 jQuery 中填充文本框时执行 javascript 函数？
【发布时间】：2011-01-01 09:54:34
【问题描述】：

当文本框填充文本时，如何在 JavaScript 中执行函数？对用户隐藏的文本框。它将由 USB 磁卡刷卡器填充。

伪代码：

<script language="javascript" type="text/javascript">
    function MyFunction() {
        //execute this function when MyTxtBox is populated
    }
</script>
<asp:TextBox id="MyTxtBox" runat="server" Visible="false" />

【问题讨论】：

文本框到底是什么？是文本区域吗？
不，它不是文本区域。如果有帮助，我可以更改它。对用户隐藏很重要。
当你说值是由USB磁卡刷卡器填充的时候，是在服务器端完成的吗？如果是，则文本框（JS）的 OnChange 可能不会触发。所以你可能不得不接受蒙克的第一个建议。
@ps - 不，它是在客户端完成的。用户刷卡，页面回调，并在屏幕上发布卡片轨迹数据进行验证。

标签： asp.net jquery asp.net-ajax

【解决方案1】：

页面加载时您似乎正在这样做。如果你是，这会工作。

$(document).ready(function(){
   if($('#MyTxtBox').val().length > 0){
      MyFunction();
   }
});

如果它正在更改：

$(document).ready(function(){
   $('#MyTxtBox').change(function(){
       if($(this).val().length > 0){
          MyFunction();
       }
   });
});

【讨论】：

我在 on change 示例中收到“预期的 ',' 或 ')'”编译错误。
哎呀，更改功能结束后应该有一个);。现在已经修复了
当MyTxtBox 样式属性未设置为display:none; 时，您的回答有效。 MyTxtBox 隐藏时不起作用
查看我关于 visible=false 的回答
@Jon P - 我正在使用 CSS 隐藏文本框控件，但它不起作用。我也在尝试在页面加载期间设置焦点。

【解决方案2】：

查看 munch 的答案，但使用 CSS 隐藏文本框，因为设置 visible = false 将导致文本框 HTML 不被呈现，因此在客户端不可用。

<style type="text/css">
.USBBox
 {
     position: absolute;
     left: -999em; 
     overflow: hidden;
 } 
 </style>   
<asp.textbox id="MyTextBox" runat="server" CSSClass="USBBox" />

然后您可以使用 jQuery 的类选择器来访问文本框，而不必担心名称错误：

%('.USBBox')

如果您的页面上有很多元素，但您可能会更好地通过 id 访问，在这种情况下，请使用客户端 id 来避免任何名称混淆问题：

$('#<%= MyTextBox.ClientID %>')

更新

使用link 中提供的 CSS 解决方案对用户隐藏文本框。使用正确的解决方案更新了 USBBox CSS 类，设置为 display:none 导致 javaScript 问题。

【讨论】：

【解决方案3】：

附加到 MyTxtBox 的 onChange 事件。您需要做一些 ASP.NET 来生成适当的 ClientID 以在 JavaScript 中使用，因为 ASP.NET 会将 MyTxtBox ID 修改为其他内容。

<asp:TextBox id="MyTxtBox" runat="server" Visible="false" />
<script language="javascript" type="text/javascript">
    function MyFunction() {
        //execute this function when MyTxtBox is populated
    }

    document.getElementById("<%= MyTxtBox.ClientID %>").onChange = MyFunction;
</script>

【讨论】：

如果元素保持焦点，onChange 会触发吗？如果 USB 滑动输入没有自动前进到下一个字段并且只是停留在字符串的末尾，浏览器会触发该 onchange 事件吗？
@Anthony - 你是对的。除非焦点前进到下一个表单域，否则不会触发 onChange 事件。一旦文本框被填充，我需要触发事件。