监听INPUT值的即时变化
2024-08-22 20:08:17
<!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=utf-8" />
<meta name="auther" content="fq" />
<title>监听输入框值的即时变化 onpropertychange oninput</title>
<script type="text/javascript">
function immediately() {
var element = document.getElementById("mytext");
if ("\v" == "v") {
element.onpropertychange = webChange;
} else {
element.addEventListener("input", webChange, false);
} function webChange() {
if (element.value) {
document.getElementById("test").innerHTML = element.value
};
}
} function addValue() {
document.getElementById("mytext").value = 'dfdsafdsfsfsdfsdfdsf';
document.getElementById("mytext2").value = 'dfdsafdsfsfsdfsdfdsf';
}
</script>
</head> <body>
<input type="button" id="txts" value="点击加载值!" onclick="addValue();" /> 直接写在页面中的示例:
<input type="text" id="mytext2" name="textfield" oninput="document.getElementById('webtest').innerHTML=this.value;" onpropertychange="document.getElementById('webtest').innerHTML=this.value;" />
<div>您输入的值为:<span id="webtest">还未输入</span></div>
<br />
<br />
<br />
<br />
<br />
<input type="text" id="mytext3" name="textfield" oninput="document.getElementById('webtest').innerHTML=this.value;" onpropertychange="document.getElementById('webtest').innerHTML=this.value;" />
<div>您输入的值为:<span id="webtest">还未输入</span></div>
<br />
<br />
<br />
<br />
<br /> 写在JS中的示例:
<input type="text" name="textfield" id="mytext" />
<div>您输入的值为:<span id="test">还未输入</span></div>
<script type="text/javascript">
immediately();
</script>
<script type="text/javascript">
/* function fn() {
console.log(this.a);
}
var obj = {
a: 2,
fn: fn
};
var bar = obj.fn;
var a = "全局";
bar(); <!---->
var obj = {
a: 2
};
fn.call(obj); var obj = {
a: 3
}
fn.apply(obj); var a = 10;
fn.call(); function Fun(a) {
this.a = a;
}
var bar = new Fun(2);
console.log(bar.a); function fn1() {
var b = 2;
this.fn2(); //以为this引用的是fn1的词法作用域
} function fn2() {
console.log(this.b);
}
fn1(); //ReferenceError*/
</script>
<!-- <script type="text/javascript" src="socket.io.js"></script> -->
</body> </html>
最新文章
- 黄聪:C#中HtmlAgilityPack判断是否包含或不包含指定的属性或值
- SOA (面向服务的体系结构)
- 用面对对象方式定tab标签
- 【转】iOS应用崩溃日志揭秘2
- USACO sprime
- Robot Framework使用技巧
- input输入框只允许输入数字/ 数字+小数点/ 文字+字母/ 等解决方法
- jvm系列(七):jvm调优-工具篇
- java源码学习(三)Enum
- HDU 1384 Intervals &;洛谷[P1250]种树
- videojs双击全屏幕观看,videojs动态加载视频
- Linux下实现普通用户免密码登录【超详细】
- lua迭代器和泛型for浅析
- 【题解】 bzoj4004: [JLOI2015]装备购买 (线性基)
- vps hiformance 设置备忘
- Difference between model.evaluate vs model.predict in Keras
- DDMS介绍
- 2017 SWERC
- css中padding和magin的区别
- 启动MacOS 本地服务