以前只是在一些 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%立刻透明度为０，可以设置闪烁效果 */
  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);

好了,这样就已经实现我们想要的效果了

实例地址