输入框字数限制

news/2024/11/29 9:37:37/

        一般在前台页面会对文本框的字数要做限制,一种方法是提示超出多少个字,不让保存对文本;还有一种是自动截取,但是自动截取对于键盘操作是没有问题的,对于鼠标的复制粘帖会有一些问题。下面看下代码:

<script type="text/javascript" src="jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="common.js"></script>
<body>  <!-- 有用代码开始  --><!--//输入框输入长度限制改进2,此方法绑定在input,textarea的onfocus事件上,参数分别人:this, maxlength,显示剩余字数的span的id.--><textarea id="textarea_catch_ask" οnfοcus="fed_inputMaxLength(this,200,'catchask_con_counter_num')" style="width:300px;height:300px" ></textarea><div class="textarea_con_counter">还能输入<strong id="catchask_con_counter_num">200</strong>字</div><!--有用代码结束-->
</body>

common.js的代码:

//输入框输入长度限制改进2,此方法绑定在input,textarea的onfocus事件上,参数分别人:this, maxlength,显示剩余字数的span的id.
function fed_inputMaxLength(target,maxlength,counterId){if($(target).attr('fed_max_length')==null){$(target).attr('fed_max_length',maxlength);var counter = $('#'+counterId);if ($.browser.msie) { //IE浏览器$(target).unbind("propertychange").bind("propertychange", function(e) {e.preventDefault();textareaMaxProc1(target, maxlength);counter.html(maxlength-$(target).val().length);});target.attachEvent("onpropertychange", function(e) {//e.preventDefault();textareaMaxProc1(target, maxlength);counter.html(maxlength-$(target).val().length);});}else { //ff浏览器target.addEventListener("input",function(e) {e.preventDefault();textareaMaxProc1(target, maxlength);counter.html(maxlength-$(target).val().length);},false); }$('target').unbind("keypress").bind("keypress", function(event) {var code;if(typeof event.charCode =="number" ){ //charCode只在keypress事件后才包含值,此时keyCode可能有值也可能没有,Ie没有charCode属性。code = event.charCode;}else{code = event.keyCode;}if(code > 9 && !event.ctrlKey && $(target).val().length>=maxlength){event.preventDefault();}else if(event.ctrlKey && $(target).val().length>=maxlength && code==118){event.preventDefault();}});}
}function textareaMaxProc1(textArea, total){var max;max=total;if($(textArea).val().length > max){$(textArea).val($(textArea).val().substring(0,max));}
}

源码下载: http://download.csdn.net/download/shiyuezhong/4702027



http://www.ppmy.cn/news/957369.html

相关文章

Prompt 技巧指南-让 ChatGPT 回答准确十倍!

出品人&#xff1a;Towhee 技术团队 作者&#xff1a;张晨 随着 ChatGPT 等大型语言模型 (LLM)的兴起&#xff0c;人们慢慢发现&#xff0c;怎么样向 LLM 提问、以什么技巧提问&#xff0c;是获得更加准确的回答的关键&#xff0c;也由此产生了提示工程这个全新的领域。 提示工…

关于输入框限制字数输入问题

在输入框输入内容&#xff0c;当需要限制字数的时候&#xff0c;如果是Input或者textarea&#xff0c;可以直接用maxlength进行字数的限制。如果是用div(添加了contenteditable属性)&#xff0c;如果直接用input事件进行字数的限制&#xff0c;则会出现临界问题。 问题起源&…

“深入解析Spring Boot:快速开发Java应用的利器“

标题&#xff1a;深入解析Spring Boot&#xff1a;快速开发Java应用的利器 摘要&#xff1a;Spring Boot是一个开发Java应用的利器&#xff0c;它简化了Spring应用的配置和部署过程&#xff0c;提供了快速构建和开发Java应用的能力。本文将深入解析Spring Boot的核心特性和优势…

Linux基础内容(26)—— 线程的互斥

Linux基础内容&#xff08;25&#xff09;—— 线程控制和线程结构_哈里沃克的博客-CSDN博客https://blog.csdn.net/m0_63488627/article/details/131372872?spm1001.2014.3001.5501 目录 1.线程互斥 1.问题引入 2.问题原因 3.安全问题 互斥 加锁 加锁后的特点 如何理…

从小白到大神之路之学习运维第62天--------Ansible自动化运维工具(playbook配置深入了解2.0)

第三阶段基础 时 间&#xff1a;2023年7月17日 参加人&#xff1a;全班人员 内 容&#xff1a; playbook配置深入了解2.0 目录 一、角色 实验案例&#xff1a;&#xff08;安装Mariadb&#xff09; 二、变量 &#xff08;一&#xff09;在playbook中使用自定义变量&#xff1…

新晋 Committer!来自复旦大学的帅哥一枚

点亮Star⭐️ 支持我们 https://github.com/apache/dolphinscheduler 最近&#xff0c;社区星力量又迎来一位新晋 Committer&#xff0c;这次是来自复旦大学研究生在读的王维饶同学&#xff0c;一起来认识一下吧&#xff01; 个人简介 姓名&#xff1a;王维饶职位&#xff1a…

比chatPDF更优秀的国内平替

chatPDF是个非常不错的点子。基于openai的embeddeding接口。但是它有两个缺点。 1、当然是需要魔法才能访问。 2、它和微调不同。所有问题都是基于现有文档。而且每次都是根据你的提问&#xff0c;在文档转化成的向量数据里寻找相关联的内容&#xff0c;一同发给 chatGPT&…

使用 openai-java-sdk 整合 ChatGPT

推荐一套基于 SpringBoot 开发的全平台数据 (数据库管理工具) 功能比较完善&#xff0c;建议下载使用: github.com/EdurtIO/datacap 目前已经支持 40 多种数据源。国内首个应用 ChatGPT 到数据管理系统中项目。 github 地址&#xff1a;https://github.com/devlive-community/o…