200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > textarea的字数限制

textarea的字数限制

时间:2021-10-04 13:12:40

相关推荐

textarea的字数限制

功能描述

在项目中我们经常会遇到要对textarea进行输入字符数的限制,并在下方提示共可输入多少文字,已输入多少,还可输入多少的类似功能。

所以就有了下面封装好的这个函数,不管是以那种方式输入,字数都可以完美的限制,可以点击此处查看例子。

代码

/*** textarea的字符数限制* @param {*} options * element [string] Dom对象的id* length [number] 可输入的总长度* hadWrite [boolean] 是否显示已输入多少的内容,true显示,false不显示,默认为true* canWrite [boolean] 是否显示还可输入多少的内容,true显示,false不显示,默认为true*/function textareaWriteLength(options) {var jsWriteBox = $(options.element).parentsUntil(".js-write-box").parent(".js-write-box");var jsAllWriteBox = jsWriteBox.find(".js-all-write-box"),jsHadWriteBox = jsWriteBox.find(".js-had-write-box"),jsCanWriteBox = jsWriteBox.find(".js-can-write-box");var jsAllWriteLength = jsWriteBox.find(".js-all-write-length"),jsHadWriteLength = jsWriteBox.find(".js-had-write-length"),jsCanWriteLength = jsWriteBox.find(".js-can-write-length");jsAllWriteLength.html(options.length);if (options.hadWrite && options.canWrite) {jsAllWriteBox.append('<span>,</span>');jsHadWriteBox.append('<span>,</span>').css("display", "inline");jsHadWriteLength.html(0);jsCanWriteBox.css("display", "inline");jsCanWriteLength.html(options.length);} else if (options.hadWrite) {jsAllWriteBox.append('<span>,</span>');jsHadWriteBox.append('<span>。</span>').css("display", "inline");jsHadWriteLength.html(0);} else if (options.canWrite) {jsAllWriteBox.append('<span>,</span>');jsCanWriteBox.css("display", "inline");jsCanWriteLength.html(options.length);} else {jsAllWriteBox.append('<span>。</span>');}function textareaWriteEvent() {console.log(1)var _this = $(this);var length = _this.val().length;if (length >= options.length) {_this.val(_this.val().substring(0, options.length));jsHadWriteLength.html(options.length);jsCanWriteLength.html(0);} else {jsHadWriteLength.html(length);jsCanWriteLength.html(options.length - length);}}$("body").on("input", options.element, textareaWriteEvent);}

参数说明

使用说明

textareaWriteLength({element: "#textareaWriteLength",length: 120,hadWrite: true,canWrite: true});

详情可查看: /project/html/textarea/textareaWriteLength/

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。