实时监听js改变textarea,input 的 value,跨浏览器支持

实时监听js改变textarea,input 的 value,跨浏览器支持  

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<meta name="auther" content="fq" />

<title>监听输入框值的即时变化 onpropertychange  oninput</title>

<script language="JavaScript" type="text/JavaScript" src="web/js/jquery.js"></script> 

<table>

         <tr>

                     <td>此处值通过js设置:</td>

                    <td><textarea id="down" type="text" readonly/></textarea></td>

            </tr>

            <tr>

                        <td>此处输入值:

             <input name="upload" type="button" class="INPUT_UP" id="upload" onclick="bb();" value="文件上传" /></td>

                         <td><textarea id="userName" type="text" /></textarea></td>

             </tr>

</table>

<script>

$(function()

                {

                        var down = "";

                        if($.browser.msie)        // IE浏览器

                        {

                                $("#userName").get(0).onpropertychange = setdown;

                                $("#down").get(0).onpropertychange = handle;

                        }

                        else        // 其他浏览器

                        {

                                var intervalName;        // 定时器句柄

                                $("#userName").get(0).addEventListener("input",setdown,false);

                                // 获得焦点时,启动定时器

                                $("#userName").focus(function(){

                                        intervalName = setInterval(handle,1000);

                                });

                                // 失去焦点时,清除定时器

                                $("#userName").blur(function()

                                {

                                        clearInterval(intervalName);

                                });

                        }

                        // 设置down input的值

                        function setdown()

                        {

                                $("#down").val($(this).val());

                        }

                        // down input的值改变时执行的函数

                        function handle()

                        {     

                                // IE浏览器此处判断没什么意义,但为了统一,且提取公共代码而这样处理。

                                if($("#down").val() != down)

                                {

                                        $("#toolTip").remove();

                                        $("#down").parent().append("<span id='toolTip'>看到这里的信息表明,通过js改变input的值也能响应相应事件:<span    style='color:red;'>" + $("#down").val() + "</span></span>");

                                        down = $("#down").val();

                                }

                        }

});

function bb()

{

document.getElementById("down").value="sfdf ";

}

</script>

</body>

</html>

 

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="auther" content="fq" />
<title>监听输入框值的即时变化 onpropertychange oninput</title>

<script language="JavaScript" type="text/JavaScript" src="web/js/jquery.js"></script>

<table>
<tr>
<td>此处值通过js设置:</td>
<td><textarea id="down" type="text" readonly/></textarea></td>
</tr>
<tr>
<td>此处输入值:
<input name="upload" type="button" class="INPUT_UP" id="upload" onclick="bb();" value="文件上传" /></td>
<td><textarea id="userName" type="text" /></textarea></td>
</tr>
</table>

<script>

$(function()
{
var down = "";
if($.browser.msie) // IE浏览器
{
$("#userName").get(0).onpropertychange = setdown;
$("#down").get(0).onpropertychange = handle;
}
else // 其他浏览器
{
var intervalName; // 定时器句柄
$("#userName").get(0).addEventListener("input",setdown,false);
// 获得焦点时,启动定时器
$("#userName").focus(function(){
intervalName = setInterval(handle,1000);
});

// 失去焦点时,清除定时器
$("#userName").blur(function()
{
clearInterval(intervalName);
});
}
// 设置down input的值
function setdown()
{
$("#down").val($(this).val());
}
// down input的值改变时执行的函数
function handle()
{
// IE浏览器此处判断没什么意义,但为了统一,且提取公共代码而这样处理。
if($("#down").val() != down)
{
$("#toolTip").remove();
$("#down").parent().append("<span id='toolTip'>看到这里的信息表明,通过js改变input的值也能响应相应事件:<span style='color:red;'>" + $("#down").val() + "</span></span>");
down = $("#down").val();
}
}
});

function bb()
{
document.getElementById("down").value="sfdf ";
}

</script>

</body>
</html>

猜你喜欢

转载自blog.csdn.net/hljqfl/article/details/86369819