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

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

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

转载于:https://www.cnblogs.com/mengyun/p/7459805.html

豆瓣首页话题输入框的实现相关推荐

网页设计实训之豆瓣首页（html+css含源码）
文章目录豆瓣首页 1.头部 2.注册页面 3.热点 4.时间 5.电影 6.小组 7.读书 8.同城 9结尾 1.头部大框架header: 2.注册首页大框架banner: 新文件login.h ...
仿豆瓣首页【web前端项目】
仿豆瓣首页[web前端项目] 下面是我之前做的一个静态页面,特此记录一下: 最需要耐心的是登录区的制作了: 以下是html部分代码: <!DOCTYPE html> <html la ...
python3爬虫豆瓣_Python3 爬虫实例（三） -- 爬取豆瓣首页图片
序前面已经完成了简单网页以及伪装浏览器的学习.下面,实现对豆瓣首页所有图片爬取程序,把图片保存到本地一个路径下. 首先,豆瓣首页部分图片展示这只是截取的一部分.下面给出,整个爬虫程序. 爬虫程序 ...
python怎么爬取豆瓣首页_Python3 爬虫（二） -- 爬取豆瓣首页图片
''' 批量下载豆瓣首页的图片采用伪装浏览器的方式爬取豆瓣网站首页的图片,保存到指定路径文件夹下 ''' #导入所需的库 import urllib.request,socket,re,sys,os ...
HTML + CSS 实现豆瓣首页
HTML + CSS 实现豆瓣首页效果图: 整个首页效果图: 部分 HTML代码: <!DOCTYPE html> <html lang="en"> &l ...
python如何爬取豆瓣_python 爬虫之爬取豆瓣网话题
获取到以上信息后就可以开始写爬虫了首先创建一个py文件,然后引入必要的包 import re,urllibfrombs4 import BeautifulSoup import datetime, ...
用Python爬取豆瓣首页所有电影名称、每部电影影评及生成词云
1.爬取环境: window 7 Chrome 浏览器注册豆瓣.注册超级鹰 2.安装第三方库:安装第三方库: 主程序用到的库有 import sys, time import pytesseract ...
仿豆瓣网首页（HTML+CSS)
一.放豆瓣网首页 1.1 douban.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
豆瓣创始人阿北：豆瓣的去中心化
豆瓣正在多样化的过程中失去公共的注意力中心.这很好,我们正在全心全意地推波助澜. 想像在春节的火车站广场中央开一家露天咖啡,支一张千人大桌讨论- 比方说,音乐.只要发言,饮品免费.想像会是什么样的对话 ...

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

豆瓣首页话题输入框的实现相关推荐

最新文章

热门文章