实时监听js改变value，跨浏览器支持

最新推荐文章于 2019-01-12 18:33:24 发布

转载最新推荐文章于 2019-01-12 18:33:24 发布 · 957 阅读

文章标签：

#实时监听js #改变value #跨浏览器支持

javascript 专栏收录该内容

43 篇文章

订阅专栏

本文介绍了一个使用ASP.NET与jQuery实现的简单示例，该示例展示了如何在不同浏览器环境下实时同步两个文本框的内容。通过检测文本框输入变化并触发相应事件来更新另一个文本框。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication2.Default" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        $(function () {
            //兼容：IE6、IE7、IE8、Firefox、Opera、Chrome、Safari
            if ($.browser.msie) {//IE浏览器  
                $("#TestTextBox1").get(0).onpropertychange = setTestTextBox2;  
            } else {//其他浏览器  
                $("#TestTextBox1").get(0).addEventListener("input", setTestTextBox2, false);
            }
        });
        // 设置TestTextBox2的值  
        function setTestTextBox2() {
            $("#TestTextBox2").val($(this).val());
        }  
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="TestTextBox1" runat="server" TextMode="MultiLine" Width="200" Height="50"></asp:TextBox>
        <asp:TextBox ID="TestTextBox2" runat="server" TextMode="MultiLine" Width="200" Height="50"></asp:TextBox>
    </div>
    </form>
</body>
</html>