实时监听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>