【前端案例】09 - 实时显示文本框输入内容

实时显示文本框内容

1 样式设计

1. 文本超出盒子宽度使用省略号代替。

     /* 文字在一行显示当超出时使用省略号替换 */
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;

2. 这里设计时需要多加一个容器盒子，进行缓冲，因为在文本超出盒子宽度使用省略号代替中使用了 overflow:hidden 导致下面的小三角被隐藏了。所以添加一个容器盒子。将内容与小三角区分开。

添加container盒子作为缓冲

3. 全部代码实现 ：

.search {
      position: relative;
      width: 400px;
      margin: 300px auto;
    }

    .container {
      position: absolute;
      top: -96px;
      left: 0;
      display: none;
      width: 200px;
      height: 30px;
      line-height: 30px;
      padding-left: 10px;
      margin: 50px 0 15px 20px;
      border-radius: 6px;
      border: 1px solid #eee;
      box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
    }

    .con {
      width: 100%;
      height: 100%;
      /* 文字在一行显示当超出时使用省略号替换 */
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .container:before {
      content: '';
      position: absolute;
      width: 0;
      height: 0;
      top: 30px;
      left: 18px;
      border: 8px solid #f00;
      border-style: solid dashed dashed;
      border-color: #fff transparent transparent;
    }

    input {
      width: 200px;
      height: 30px;
      line-height: 30px;
      padding-left: 15px;
      outline: none;
      border: none;
      border-bottom: 1px solid #ccc;
    }

<div class="search">
  <div class="container">
    <!-- 内容盒子 .con 小三角 .container:before -->
    <div class="con"></div>
  </div>
  <input type="text" placeholder="请输入内容">
</div>

  let input = document.querySelector('input');
  let con = document.querySelector('.con');
  let container = document.querySelector('.container');

/**
   * 为什么要使用keyup事件 不使用 keydown 和 keypress
   * keydown 和 keypress 都是按下时触发，是在文字没有落入文本框时就会触发
   */
  input.addEventListener('keyup', function () {
    // 获取到当前输入框中的value
    let inputValue = input.value;
    if (inputValue !== '') {
      container.style.display = 'block';
      con.innerHTML = inputValue;
    } else {
      container.style.display = 'none';
    }
  });

  /**
   * 当时区焦点就隐藏container盒子
   */
  input.addEventListener('blur', function () {
    container.style.display = 'none';
  });

  /**
   * 当获取焦点的时候显示盒子
   */
  input.addEventListener('focus', function () {
    // 判断当前的文本框内容是否为空，为空就不显示
    if (input.value !== '') {
      container.style.display = 'block';
    }
  })