豆瓣首页话题输入框的实现

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了豆瓣首页话题输入框的实现相关的知识,希望对你有一定的参考价值。

  在做问答的时候,遇到一个需求,用户的问题需要限制字数,不仅显示计算的超出字数,还需在超出的内容上加一些提醒的效果,例如豆瓣首页的话题输入框,抽时间研究了下,需要考虑下面几个问题:

1、输入框的高度是固定的,如果超出高度需要滚动显示(可上下键移动显示)

2、随时计算输入的字数,并显示在下方

3、根据计算结果将多出的部分加背景显示(textarea里是不可以加背景的 :< )

4、根据3分析,需要加个hack实现(加个highlight的div),如果超出此div需要根据teatarea的scrollTop添加移动的距离

5、考虑输入的各种内容及粘贴的情况

下面就一步一步来实现这种效果,先贴个图看看效果:

技术分享

html代码如下:

<div id="container">
  <div class="text-wrap"><div class="highlight"></div></div>
  <textarea autocomplete="false"></textarea>
  <p class="count">140</p>
</div>

 

因为要考虑到textarea的文字与highlight的代码完全重合,那么定义的样式需要完全相同,且因输入的文字有限制,所以考虑去掉输入框的滚动条:

textarea::-webkit-scrollbar {display:none}

完整的css如下:

技术分享
      #container {
        position: relative;
      }
      .text-wrap {
        height: 200px;
        width: 500px;
        padding: 5px 5px 5px 5px;
        overflow: hidden;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 9;
      }
      textarea, .highlight {
        width: 500px;
        font-family: arial,sans-serif;
        font-size: 14px;
      }
      textarea {
        min-height: 200px;
        border: 1px solid #ccc;
        padding: 5px 5px 5px 5px;
        position: relative;
        background: none;
        resize: none;
        z-index: 10;
      }
      textarea::-webkit-scrollbar {display:none}
      .highlight {
        min-height: 200px;
        white-space: pre-wrap;
        word-wrap: break-word;
        color: transparent;
      }
      .highlight span {
        background: #fcc;
      }
      .error {
        color: red;
      }
View Code

 

除了html、css外,最最重要的就是js了,只有她才可以带来神奇的效果,她是不可替代的唯一,她是实现你与机器之间的纽带,有了她,不困了、不累了、不饿了,O(∩_∩)O~~

既然考虑到每次输入的时候去查字数,那么就涉及到了事件,keyup和input,所以在textarea上添加这两个事件,只有触发这两个事件时才执行下面的一系列操作。

查字:首先计算是否超出字数,这是常见的限定字数输入框,各种微博、评论基本上都用到这个,定义两个变量,考虑会粘贴或输入代码,所以替换了‘<‘ 和 ‘>‘,len等于文字的长度,

如果len大于设定的最大值需要处理两步:

1、显示当前字数为醒目的红色,提醒用户超出字数限定范围

2、给超出的字数加背景

text = $.trim($this.val().replace(/</g, ‘&gt;‘).replace(/>/g, ‘&lt;‘))
len = text.length

全部js代码如下,注释非常清楚的说明了各部分的内容

技术分享
        var MAX = 140,
          $text = $(‘textarea‘),
          $highlight = $(‘div.highlight‘);
        $text.on(‘keyup input‘, function() {
          var $this = $(this),
            text = $.trim($this.val().replace(/</g, ‘&gt;‘).replace(/>/g, ‘&lt;‘)),
            len = text.length,
            count = Math.floor(MAX-len);
          if(count < 0) {
            $(‘p.count‘).addClass(‘error‘)
          }else{
            $(‘p.count‘).removeClass(‘error‘)
          }
          // 显示当前字数
          $(‘p.count‘).text(count)
          // 将文字分成两部分,超出的内容用span包起来,css加红色背景样式
          $highlight.html(text.slice(0, MAX) + ‘<span>‘ + text.slice(MAX) + ‘</span>‘)
          // 考虑粘贴时,内容超出,高亮部分需要重置位置
          resetMask()
        }).on(‘scroll‘, function() {
          // textarea滚动时,重置高亮部分的位置
          resetMask()
        })
        // 高亮内容位置随文本框内容的位置重置
        function resetMask() {
          var textScrollTop = $text.scrollTop();
          if(textScrollTop > 0) {
            $highlight.css(‘margin-top‘, -textScrollTop);
            return
          }
          $highlight.css(‘margin-top‘, 0)
        }   
View Code

最终效果地址:https://codepen.io/mengyun/pen/eEbryJ

 

以上是关于豆瓣首页话题输入框的实现的主要内容,如果未能解决你的问题,请参考以下文章

豆瓣首页

Python3 爬虫实例 -- 爬取豆瓣首页图片

如何用微信小程序模仿豆瓣首页

python爬取豆瓣电影首页超链接

关于豆瓣登录,并实现验证码输入的方法

selenium对富文本框的处理