<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
*{
margin:20px auto;
padding: 0;
font-size: 20px;
}
body{
width: 500px;
height: 200px;
}
#dd{
background-color: #00AAFF;
}
</style>
<body>
<input type="text" id="url" style="width: 250px;">
<p id="dd">{{textmod}}</p>
<script>
var mod = {};
Object.defineProperty(mod,'textmod',{
set:function (val) {
document.getElementById("dd").innerHTML=val;
document.getElementById("url").value=val;
}
});
document.getElementById("url").onkeyup = function (e) {
mod.textmod = e.target.value;
};
mod.textmod="";
</script>
</body>
</html>
效果如图: