`
271788203
  • 浏览: 490205 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

用javascript统计剩余字数

JavaScriptHTML 
阅读更多 
<html>
<head>
<script type="text/javascript">
function checkLength(which) { 
var maxChars = 250; 
if (which.value.length > maxChars) 
which.value = which.value.substring(0,maxChars); 
var curr = maxChars - which.value.length; 
document.getElementById("chLeft").innerHTML = curr.toString(); 
} 
</script>
</head>
<body>
<textarea name="description" onkeyup="checkLength(this);"></textarea> 
<br /><small>文字最大长度: 250. 还剩: <span id="chLeft">250</span>.</small> 

</body>

</html>

 函数中首先给maxChars变量指定了值(输入区内最多可用的字符数，注意，该变量是个可用于计算的数值)
然后从参数中得到在textarea中已输入的字符长度，并与前面指定的最大长度做比较。
当输入的字符长度超过范围，则使用substring来强制限制其长度(0,maxChars)的意思就是可输入范围是0个字符到maxChars(变量)个字符。
var curr = maxChars - which.value.length;的作用是算出还可用多少个字符，将数值保存在curr中。
最后通过getElementById定位到id为chLeft的对象(在该HTML中为span)，并将curr里的值通过toString方法把数值变为字符串，反馈到span标签内。

分享到：
| cvs update时文件状态
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    textarea剩余字数

    通过jQuery或其他JavaScript库，可以实现更多高级功能，如自动完成、字数统计、自动调整高度等。例如，使用jQuery插件`autosize`可以自动调整`textarea`的高度以适应内容： ```javascript $('textarea').autosize()...

    js实现多行文本框统计剩余字数功能

    总结一下，本文通过实例展示了如何使用JavaScript实现在多行文本框中统计剩余字数的功能，并在用户输入达到限制时给出提示。同时，还提供了一个额外的统计功能，可以分析输入文本中的字符类型。这个功能对于需要限制...

    统计字数程序

    "统计字数程序"就是这样一个工具，它专为了解决用户在使用纯文本格式（如TXT）编写文档时无法便捷地获取字数信息的问题。本文将深入探讨统计字数的相关知识点，并基于这个主题提供详细的信息。 首先，我们需要理解...

    jQuery做的文本框字数统计/限制插件

    这个插件可能使用了jQuery的事件监听功能，如`keyup`、`keydown`或`input`事件，来捕获用户在文本框中的每一次输入行为，然后通过JavaScript的字符串方法（如`length`属性）来计算字符数，并更新显示的剩余字数。...

    JavaScript实现统计文本框Textarea字数增强用户体验

    在网页设计中，提高用户体验是至关重要的，尤其是在社交...需要注意的是，为了更好地适应不同语言的字符长度，如中文、日文等，可能需要对计算剩余字数的逻辑进行调整，确保准确无误地反映出不同字符集下的字数限制。

    统计字数的textarea

    在这个场景下，我们需要实现一个能够动态计算textarea中字符数的机制，并可能附加一些额外的功能，比如限制最大字数，或者显示剩余字数。 首先，我们需要了解HTML的`&lt;textarea&gt;`元素，它是用来创建多行文本输入的...

    Vue实现动态显示textarea剩余字数

    这段CSS会让`span`元素与`textarea`保持适当的距离，并使用灰色字体显示剩余字数。 最后，当用户在`textarea`中输入字符时，`descInput`方法会自动更新`remnant`的值，从而实时显示剩余的字符数。这种方法简单有效...

    jquery仿微博字数限制

    接下来，我们编写jQuery代码来监听`textarea`的`keyup`事件，每当用户输入或删除字符时，计算并更新剩余字数： ```javascript $(document).ready(function() { var maxLength = 140; // 微博最大字数限制 var $...

    jQuery实现新浪微博回复字数限制

    3. **计算剩余字数**：在`updateRemainingChars`函数中，我们需要计算用户当前输入的字符数，并从最大允许的字数中减去这个数，得到剩余字数。 ```javascript function updateRemainingChars() { var maxChars = ...

    JavaScript中统计Textarea字数并提示还能输入的字符

    在JavaScript中，实现一个功能，让用户在`Textarea`文本框中输入文字时实时统计已输入的字符数，并显示还能输入多少字符，是一个常见的需求，尤其在社交媒体和博客平台中。这个功能可以提升用户体验，帮助用户了解...

    jQuery计算文本框可输入字数代码.zip

    然后，我们可以编写JavaScript代码，监听文本框的`keyup`事件，每次按键时更新剩余字数： ```javascript $(document).ready(function() { var maxLength = $('#inputText').attr('maxlength'); var ...

    新浪微博字数统计 textarea字数统计实现代码

    本文将详细介绍新浪微博字数统计功能的实现原理，并通过一段具体的JavaScript代码来展示如何实现这一功能。 #### 二、字数统计的基本概念 字数统计功能通常涉及到以下几个核心要素： - **统计范围**：需要明确统计...

    剩余字数统计插件

    【剩余字数统计插件】是一种实用的网页交互功能，主要应用于留言板或个人简介等需要限制输入字符数的场景。这种插件的核心功能是实时显示用户输入内容的剩余字符数，并且通常会设定一个最大字符数限制，以帮助用户在...

    字数输入限制百分比显示CSS+JS代码

    然后定义一个`updateCounter`函数，它会根据输入框的当前值更新计数器显示，并根据剩余字数决定是否应用错误样式。最后，我们为输入框添加了一个`input`事件监听器，当用户输入时触发`updateCounter`函数。 现在，...

    jQuery实时计算用户输入字数代码.zip

    `jQuery` 是一个广泛使用的 JavaScript 库，它提供了一系列便捷的 API 来简化 DOM 操作，使得实现这样的功能变得简单。在这个"jQuery实时计算用户输入字数代码.zip"压缩包中，我们可以找到一个实现此功能的示例。 ...

    php+jquery+ajax无刷新评论 无刷新翻页，字数统计 绝对可以用

    字数统计功能则相对简单，jQuery可以轻松获取用户在评论框内输入的文本，然后使用JavaScript的内置方法计算字符或单词数量。为了防止用户超过预设的评论长度，可以在输入过程中实时更新剩余可输入字数，并在达到限制...

    效果超酷的textarea的输入字数限提示.rar

    // 更新剩余字数提示 } }); ``` 在这个例子中，我们为textarea添加了一个事件监听器，当用户输入时，会更新并显示剩余的字符数。同时，如果超过了设定的最大字数，我们会截取超出部分的文本并给予用户警告。 ...

    jQuery插件charCount模仿twitter和新浪微博的textarea字数统计.zip

    本文将详细介绍如何使用jQuery插件charCount来模仿这些平台的textarea字数统计功能。 首先，jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和Ajax交互。而charCount这个插件则是基于jQuery的一个...

    动态计算文本框内的可输入字数

    3. **反馈显示**：可以创建一个辅助的标签或提示来显示剩余字数，每当计数器更新时，也更新这个提示。 以下是一个简单的JavaScript示例： ```javascript document.getElementById('myTextBox').addEventListener('...

Magicbox
Global site tag (gtag.js) - Google Analytics