|
 |
| |
ป้อนค่า Textbox ที่ 1 แล้วแสดงค่าอักษรตัวแรกใน Textbox 2 อย่างไรครับ. |
| |
 |
|
|
 |
 |
|
Code (PHP)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Two-way dataBingding</title>
</head>
<body>
<input type=text id="myText1">
<input type=text id="myText2">
<span type=text id="myDomElement"></span>
<script>
function Binding(b) {
_this = this
this.elementBindings = []
this.value = b.object[b.property]
this.valueGetter = function(){
return _this.value;
}
this.valueSetter = function(val){
_this.value = val
for (var i = 0; i < _this.elementBindings.length; i++) {
var binding=_this.elementBindings[i]
binding.element[binding.attribute] = val
}
}
this.addBinding = function(element, attribute, event){
var binding = {
element: element,
attribute: attribute
}
if (event){
element.addEventListener(event, function(event){
_this.valueSetter(element[attribute]);
})
binding.event = event
}
this.elementBindings.push(binding)
element[attribute] = _this.value
return _this
}
Object.defineProperty(b.object, b.property, {
get: this.valueGetter,
set: this.valueSetter
});
b.object[b.property] = this.value;
}
var obj = {default:123}
var myInputElement1 = document.getElementById("myText1")
var myInputElement2 = document.getElementById("myText2")
var myDOMElement = document.getElementById("myDomElement")
new Binding({
object: obj,
property: "default"
})
.addBinding(myInputElement1, "value", "keyup")
.addBinding(myInputElement2, "value", "keyup")
.addBinding(myDOMElement, "innerHTML")
obj.default = "456";
</script>
</body>
</html>
|
 |
 |
 |
 |
| Date :
2020-12-16 15:57:26 |
By :
Guest |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
เปลี่ยนเป็นใช้ ajax&jquery ดีกว่าครับสั้นๆ
example
<input type="text" id="txt1"><br/>
<input type="text" id="txt2">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){ // เมื่อเพจพร้อมใช้งาน
$('#txt1').on('keyup',function(){ // txt1 ถ้ามีการ keyup
const txt=$(this).val(); // ให้ดึงค่าตัวมันเองของ value ลงในตัวแปร txt
$('#txt2').val(txt[0]); // txt2 ค่า value ให้ใส่ค่าตัวแปร txt array ที่ 0 คือตัวแรก
});
|
ประวัติการแก้ไข
2020-12-16 17:34:33
| |
|
|
| |
| Date :
2020-12-16 17:33:52 |
By :
Genesis™ |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 00
|
