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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/251947.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

pytorch 吸烟检测yolov5s

YOLOV5s 吸烟目标检测 参考学习 文章目录 本原创项目长期更新&#xff0c;旨在完成校园异常行为实时精检测&#xff0c;作到集成N次开发优化&#xff08;不止局限于调包&#xff09;为止&#xff0c;近期将不断更新如下模型数据标注文件教程。关注博主&#xff0c;Star 一下g…

JQuery的ajax函数执行失败,alert函数弹框一闪而过

先查看<form>标签是否有action属性&#xff0c;如果没有&#xff0c;并且最后<button>标签的type属性为submit‘时&#xff0c;默认提交位置就是当前页面 如果在页面右键检查&#xff0c;点击网络&#xff0c;会在开头发现这样的post包&#xff1a; 在右侧消息头处…

postgresql 不同数据库不同模式下的数据迁移

编写不容易,转载请注明出处谢谢, 数据迁移 因为之前爬虫的时候&#xff0c;一部分数据并没有上传到服务器&#xff0c;在本地。本来用的就是postgresql&#xff0c;也没用多久&#xff0c;数据迁移的时候&#xff0c;也遇到了很多问题&#xff0c;第一次使pg_dump xx > file…

Oracle中主键自增长

最近在学习Oracle和MySql&#xff0c;MySql有自动配置主键自增长auto_increment&#xff0c;这样在输入数据的时候可以不考虑主键的添加&#xff0c;方便对数据库的操作。 在Oracle中设置自增长首先用到sequence序列&#xff1b; 以创建学生表为例&#xff1a; create table St…

docker与mmdetection

这里不再介绍 mmdetection 的安装和配置&#xff0c;使用 mmdetection 较简单的方法是使用已安装 mmdetection 的 docker 容器。这样直接省去了安装 mmdetection 的过程&#xff0c;让重心放在模型训练上&#xff01; 如果你对 docker 和 mmdetection 还不是很熟悉&#xff0c…

正斜杠( / )和反斜杠( \ )的区别

反斜杠“\”是电脑出现了之后为了表示程序设计里的特殊含义才发明的专用标点。所以除了程序设计领域外&#xff0c;任何地方都不应该使用反斜杠。 如何区分正反斜杠 英语&#xff1a;"/" 英文是forward slash, “\" 是backward slash形象些比喻的话&#xff0c;…

MMDetectionV2 + Colab

MMDetectionV2 Colab 超详细教程及踩坑实录 文章目录 前言一、环境配置二、准备自己的数据集 Aug.14更新三&#xff1a;修改config文件 3.1 文件结构3.2 &#xff08;本地&#xff09;修改config文件 3.2.1 &#xff08;本地&#xff09;构造自己模型的权重文件3.2.2 &#x…

刚刚,OpenStack 第 19 个版本来了,附28项特性详细解读!

刚刚&#xff0c;OpenStack 第 19 个版本来了&#xff0c;附28项特性详细解读&#xff01; OpenStack Stein版本引入了新的多云编排功能&#xff0c;以及帮助实现边缘计算用例的增强功能。 OpenStack由一系列相互关联的项目组成&#xff0c;这些项目可以以不同的组合方式组合在…

SQL作业:综合练习(二)的返评

一&#xff1a;作业题目&#xff1a;综合练习&#xff08;二&#xff09; 二&#xff1a;题目要求&#xff1a; 1、创建数据库CPXS&#xff0c;保存于E盘根目录下以自己学号姓第一个字母&#xff08;阿拉伯数字大写字母&#xff09;方式创建的文件夹中&#xff0c;初始大小5MB&…

paddlepaddle-VisualDL2.0对项目进行可视化调参

如果需要更好的阅读体验&#xff0c;可以在ai studio上fork该项目&#xff1a;使用VisualDL2.0对项目进行可视化调参 调参是深度学习必须要做的事情。数据和模型处理好后&#xff0c;需要进行模型训练&#xff0c;这个时候就需要进行调参了。一种好的参数配置&#xff0c;可以…

第一、二次实训作业

1.编写程序&#xff1a; 声明一个整型变量a&#xff0c;并赋初值5&#xff0c;在程序中判断a是奇数还是偶数&#xff0c;然后输出判断的结果。 package 判断奇偶; public class liux { public static void main(String[] args){ int x5; if(x%20){ System.out.println("这…

推荐一款作图工具

以前看到别人的时序图觉得好好看&#xff0c;然后就想这都是用的什么工具画出来的呢&#xff1f;然后看到了一个师兄用的这个工具&#xff0c;真的挺好用的。这是是试用版的界面。类图我觉着看起来效果都挺不错的。转载于:https://www.cnblogs.com/tuhooo/p/8874410.html

【codeforces】【比赛题解】#849 CF Round #431 (Div.2)

cf的比赛越来越有难度了……至少我做起来是这样。 先看看题目吧&#xff1a;点我。 这次比赛是北京时间21:35开始的&#xff0c;算是比较良心。 【A】奇数与结束 "奇数从哪里开始&#xff0c;又在哪里结束&#xff1f;梦想从何处起航&#xff0c;它们又是否会破灭呢&#…

PaddleDetection支持的数据格式

PaddleDetection支持的数据格式 目前#PaddleDetection支持43种数据格式&#xff1a;coco voc widerface。在这里我们主要说明一下如何使用自定义COCO进行目标检测、实例分割&#xff1b;如何使用自定义VOC数据集进行目标检测。在PaddleDetection新的版本中&#xff0c;我们将数…

[dts]Device Tree机制【转】

转自&#xff1a;https://www.cnblogs.com/aaronLinux/p/5496559.html 转自&#xff1a;http://blog.csdn.net/machiner1/article/details/47805069 ------------------Based on linux 3.10.24 source code 参考/documentation/devicetree/Booting-without-of.txt文档 目录 1.…

AntiSamy测试

AntiSamy为owasp针对xss提供的处理库&#xff0c;可以配置xml策略来决定过滤的内容&#xff0c;比如标签、属性、css等&#xff0c;自定义策略给开发人员使用成本比较高&#xff0c;AntiSamy也提供了几个内置的策略&#xff0c;其安全级别也不同&#xff0c;过滤的内容也不一样…

SoJpt Boot 2.2-3.8 发布,Spring Boot 使用 Jfinal 特性极速开发

开发四年只会写业务代码&#xff0c;分布式高并发都不会还做程序员&#xff1f; 在Spring Boot框架下使用Jfinal特性极速开发,可以在Spring Boot中向使用Jfinal一样使用Enjoy、Aop、Controller等一系列方法(如: getFile(), renderFile....),以及ActiveRecord SoJpt Boot&…

3轴机器人各关节运动学建立,python编程,非常容易理解

分类&#xff1a;机器人学 一、问题描述 如右图所示的三自由度机械臂&#xff0c;关节1和关节2相互垂直&#xff0c;关节2和关节3相互平行。如图所示&#xff0c;所有关节均处于初始状态。 要求: (1) 定义并标注出各关节的正方向&#xff1b; (2) 定义机器人基坐标系&#x…

Win 10 源码一览:0.5T 代码、400 万文件、50 万文件夹

Windows 操作系统本身是不开源的&#xff0c;但是近日微软内核工程师 Axel Rietschin 发表了一篇博客&#xff0c;带大家一窥了 Windows 10 内核的魅力。 Axel 介绍&#xff0c;Windows 10 与 Windows 8.x、7、Vista、XP、2000 和 NT 的代码库是相同的&#xff0c;其中每一代都…

JDK+Tomcat搭建JSP运行环境--JSP基础

一、搭建JSP运行环境之前需要了解的基本知识 配置JSP运行环境之前&#xff0c;我们需要了解JSP的运行机制。只有了解JSP运行机制后&#xff0c;我们才能知道为什么要搭建JSP运行环境?如何去搭建JSP运行环境?为什么要配置Tomcat、JDK&#xff1f; JSP(Java Sever Page)即Java服…