以前只是在一些 mvc
、mvvm
框架(angular、vue等)中使用 双向数据绑定
实现将文本区域中显示的内容显示在指定的区域。现在我使用原生 DOM
来模拟这种效果。
首先简单设计一个简单的页面布局
<div class="test-wrap">
<textarea id="testWatch" placeholder="请输入..."></textarea>
<div id='showTxt' class="showTxt"></div>
</div>
然后再设置一些样式整体美化一下(入了前端的坑,有强迫症了...o_o)
/* 定义keyframe动画,命名为blink */
@keyframes blinkCursor {
0% { opacity: 1; }
50% { opacity: 1; }
50.01% { opacity: 0; } /* 注意这里定义50.01%立刻透明度为0,可以设置闪烁效果 */
100% { opacity: 0; }
}
// 简单初始化页面样式
* { padding: 0; margin: 0; }
textarea:focus { outline: none; }
.test-wrap {
textarea {
display: block;
height: 40px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 5px 10px;
width: 140px;
margin: 10px auto;
resize: none;
&:focus {
border-color: #ff9052;
}
}
.showTxt {
width: 130px;
height: auto;
min-height: 200px;
background-color: #f2f2f2;
padding: 10px 15px;
color: #666;
border: 1px solid #ccc;
margin: 0 auto;
word-break: break-all;
&:after {
content: '';
width: 2px;
height: 15px;
display: inline-block;
vertical-align: middle;
border-right: 2px solid #ff9052;
/* 定义 blinkCursor 类*/
animation: blinkCursor .75s linear infinite;
color: #dd4814;
}
}
}
样式添加好了,现在来添加js,实现我们想要的效果:
const $addEvent = function (elem, eType, fn, useCapture){
if (elem.addEventListener) {
elem.addEventListener(eType, fn, useCapture);
return true;
} else if (elem.attachEvent) {
var r = elem.attachEvent('on' + eType, fn);
return r;
} else {
elem['on' + eType] = fn;
}
}
const element = document.getElementById('testWatch');
$addEvent(element, 'input', () => {
document.getElementById("showTxt").innerHTML = element.value;
}, false);
好了,这样就已经实现我们想要的效果了