原生js实现实时监听输入的文本

以前只是在一些 mvcmvvm 框架(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);

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

实例地址

推荐阅读更多精彩内容

  • 今晚,孙田屿刚下校车,便高兴的冲到我面前,告诉我她获得了一等奖,老师奖励了一盒铅笔,卫生打的好还奖励了棒棒糖,小二...
    二年级一班孙田屿妈妈阅读 46评论 0 0
  • 1.显示不重复的的值: SELECT DISTINCT 列名 FROM 表名 2.显示前几条数据 SQLSERVE...
    土豆特别想爬山阅读 75评论 0 0
  • 香农的论文,通信的数学理论。 自古以来,人们都希望量化事物。实体事物之量化相对容易,斤两、高低、长短而已。 虚拟之...
    withism阅读 60评论 0 0
  • 昨天写完了关于70分的时间管理的系统,比较简单,就是写任务清单。 但是这个看起来很简单,但是想完全做到,并不容易。...
    手机哥阅读 126评论 0 0
  • davichi 这份爱 西干能退都里面昂 kiyou 度起我几噶 还不搜都 熬能马儿特冷 忒盘能够拉拉 头hing...
    卟尼与鹿阅读 123评论 0 0