今日在某本书上看到有关如何动态统计文本域的一段js代码,发现有些小bug,对其不完善的地方做了适当的修改.
原html代码如下:
<html:textarea property="areaDescription" rows="4" cols="80" onkeydown="countStrByte(this)" onkeyup="countStrByte(this)" ></textarea>
最多允许 
<input name="total" type="text" disabled class="noborder" id="total" value="512" size="4">个字节 已用字节:
<input name="used" type="text" disabled class="noborder" id="used" value="0" size="4">剩余字节:
<input name="remain" type="text" disabled class="noborder" id="remain" value="512" size="4">
原js 代码如下:
/*
========================================================================
用于判断用户输入的字符数是否大于允许输入的字符数并计算已用字节数与剩余字节数
=======================================================================
*/
function countStrByte(message){
var byteCount=0;
var strValue=message.value;
var used=document.getElementById("used");
var total=document.getElementById("total");
var remain=document.getElementById("remain");
var strLength=message.value.length;
var maxValue=total.value;
if(lastCount!=strLength){
for(var i=0;i<strLength;i++){
byteCount=(strValue.charCodeAt(i)<=256)?byteCount+1:byteCount+2;
if(byteCount>maxValue){
message.value=strValue.substring(0,i);
alert("内容最多不能超过"+maxValue+"个字节!\n注意:一个汉字为两个字节。");
byteCount=maxValue;
break;
}
}
used.value=byteCount;
remain.value=maxValue-byteCount;
lastCount=strLength;
}
在页面上执行该代码时,发现当用户在文本域中用键盘敲入文字(触发onkeydown和onkeyup事件),将会动态统计当前输入的字节数和剩余字节数,但是如果用户将一大段文本通过右键粘贴的方式,将文字粘入文本域,统计数据不做任何变化.
再次尝试用增加onchange事件
html代码如下
<html:textarea property="areaDescription" rows="4" cols="80" onkeydown="countStrByte(this)" onkeyup="countStrByte(this)" onchange="countStrByte(this)""></textarea>
最多允许 
<input name="total" type="text" disabled class="noborder" id="total" value="512" size="4">个字节 已用字节:
<input name="used" type="text" disabled class="noborder" id="used" value="0" size="4">剩余字节:
<input name="remain" type="text" disabled class="noborder" id="remain" value="512" size="4">
发现问题依旧没有解决,这种方式下,只有光标的焦点移开文本域的时候才会重新统计.
最后在网上google了一下发现textarea还有一个onpropertychange事件, 看了网上的解释,原来该事件与onchange事件存在本质区别,onpropertychange事件是当控件里的内容一改变马上触发事件.
现在才发现原来有这么强大的事件,自然就不需要onkeydown和onkeyup事件了,去掉onkeydown和onkeyup事件,加上
onpropertychange事件,万事Ok!(注意:onpropertychange事件仅限于使用在普通的html上,使用过struts的html:textarea 标签的不包含该事件,否则会报错)
最终修改代码如下:
<textarea name="areaDescription" rows="4" cols="80" onpropertychange="countStrByte(this)"><c:out value="${landRelocateInf.areaDescription}"/></textarea>
最多允许 
<input name="total" type="text" disabled class="noborder" id="total" value="512" size="4">个字节 已用字节:
<input name="used" type="text" disabled class="noborder" id="used" value="0" size="4">剩余字节:
<input name="remain" type="text" disabled class="noborder" id="remain" value="512" size="4">
使用<c:out 标签输出值是为了防止用户输入一些html代码而产生的显示问题,通过该标签可以实现转义.
分享到:
相关推荐
Vue实现动态显示textarea剩余文字数量,具体内容如下 ...javascript代码如下: data(){ return{ remnant: 200 } } methods:{ descInput(){ var txtVal = this.desc.length; this.remnant = 200 - txtVal;
通过jQuery或其他JavaScript库,可以实现更多高级功能,如自动完成、字数统计、自动调整高度等。例如,使用jQuery插件`autosize`可以自动调整`textarea`的高度以适应内容: ```javascript $('textarea').autosize()...
标题“统计字数的textarea”涉及的是网页开发中一个常见的需求,即在用户输入文本的textarea元素中实时显示或限制字数。这个功能在许多Web应用中都有应用,例如在线编辑器、评论系统或者表单填写等。在这个场景下,...
本文将深入探讨如何实现对`textarea`文本长度的控制,并实时显示输入字数的统计。 首先,我们可以使用JavaScript来实现这一功能。JavaScript是一种广泛使用的客户端脚本语言,可以在用户与网页交互时执行,提供动态...
js 特效 html 特效 对textarea框的代码调试-简单型 js 特效 html 特效 对textarea框的代码调试-简单型
在调试场景下,我们可以利用textarea来显示和编辑JavaScript代码。通过监听textarea的onChange事件,每当textarea中的代码发生变化时,我们可以实时捕获并执行这些代码,从而观察其执行结果。 要实现这样的调试框架...
js代码 [removed] //显示限制输入字符method function textAreaChange(obj){ var $this = $(obj); var count_total = $this.next().children('span').text(); var count_input = $this.next().children...
对textarea框的代码调试-简单型.rar对textarea框的代码调试-简单型.rar对textarea框的代码调试-简单型.rar对textarea框的代码调试-简单型.rar对textarea框的代码调试-简单型.rar对textarea框的代码调试-简单型.rar
对textarea框的代码调试.rar对textarea框的代码调试.rar对textarea框的代码调试.rar对textarea框的代码调试.rar对textarea框的代码调试.rar对textarea框的代码调试.rar
js 特效 html 特效 对textarea框的代码调试 js 特效 html 特效 对textarea框的代码调试
在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理和动画效果。本示例中,我们将探讨如何使用jQuery...通过深入理解jQuery的这些基本操作,你可以创建更复杂、更动态的网页交互。
为了解决这个问题,我们可以使用JavaScript或者jQuery来实现textarea的高度自适应功能,即根据textarea内的内容动态调整其高度,确保内容始终可见。 `textareaAutoHeight.jquery.js` 是一个基于jQuery的插件,它的...
接下来,我们需要编写JavaScript代码 `line-numbers.js`,用于实时更新行号。以下是一个简单的实现: ```javascript document.addEventListener('DOMContentLoaded', function () { const textarea = document....
在本文中,我们将深入探讨如何使用AngularJS框架来实现一个textarea文本输入的字数限制功能。AngularJS,作为一款强大的前端开发框架,以其双向数据绑定和丰富的指令系统著称,可以方便地帮助开发者构建功能丰富的...
本文将详细介绍新浪微博字数统计功能的实现原理,并通过一段具体的JavaScript代码来展示如何实现这一功能。 #### 二、字数统计的基本概念 字数统计功能通常涉及到以下几个核心要素: - **统计范围**:需要明确统计...
为了解决这个问题,我们可以利用JavaScript来实现动态的字数统计和提示功能。 在JavaScript中,我们可以通过监听textarea的`input`事件来实时获取用户输入的变化。当用户在textarea中键入字符时,这个事件会被触发...
总结来看,这段代码向我们展示了如何使用jQuery来实现一个功能完备的textarea字数限制功能,包括对不同浏览器的兼容性处理、中文字符长度的特殊处理以及超出字数时的截断逻辑。这对于前端开发者而言是实际项目开发中...