`
可爱的小野人
  • 浏览: 34189 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

JS显示剩余字数(TextArea写法)

    博客分类:
  • HTML
阅读更多
<html>
<body>
<h2>测试剩余字数</h2>
<textarea id="inputword"></textarea>
<input type="text" id="lastwordnum" value="10">
</body>
<script type="text/javascript">
var textareaobj=document.getElementById('inputword');
textareaobj.onkeydown=function(){
checklastword();
}

textareaobj.onkeyup=function(){
checklastword();
}

function checklastword(){
var lastwordnum=10-textareaobj.value.length;
if(lastwordnum>=0) document.getElementById('lastwordnum').value=lastwordnum;
if(lastwordnum < 1) textareaobj.value= textareaobj.value.substr(0,10);
}//test
</script>
</html>

    自己写的一个js检测剩余字数的方法,最近一个项目中用到,仅供参考,如需封装或是中文和英文显示字数不同可以自己扩展。

    主要用了keydown和keyup两个事件同时绑定的方法,比较简单易行。复杂一点的检测剩余字数控件可以去新浪微博找。

分享到:
评论

相关推荐

    textarea剩余字数

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

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

    Vue实现动态显示textarea剩余文字数量,具体内容如下 这里我们假设允许用户输入的最多数量为200个 html代码如下: &lt;textarea maxlength="200" @input="descInput" v-model="desc" /&gt; &lt;span&gt;{{remnant}}/200...

    javaScript边打字边显示剩余字数

    在探讨“javaScript边打字边显示剩余字数”这一主题时,我们深入解析了如何在用户输入文本的过程中实时更新并展示剩余可输入字符数量,这一功能尤其适用于留言框、评论区或表单输入限制场景,能有效提升用户体验,...

    控制textarea文本长度,并限制输入字数(带统计显示)

    然后,通过JavaScript获取`textarea`和显示字数统计的`span`元素,添加事件监听器`'input'`。当`textarea`内容改变时,更新字数统计,并检查是否超出限制。如果超过,截取前100个字符并弹出警告。 这个示例只是一个...

    js计算文本域剩余字数

    为了提高用户体验,我们还可以添加一些额外的功能,比如当用户输入达到最大字数时禁用提交按钮,或者改变剩余字数显示的颜色以警告用户。 将以上代码整合到一个完整的示例中,我们可以创建一个简单的HTML页面,...

    基于JS实现textarea中获取动态剩余字数的方法

    ### 知识点四:实现动态剩余字数显示的逻辑 1. 监听textarea的输入事件。 2. 获取当前textarea的值及其最大长度限制。 3. 计算并显示当前已输入的字符数与最大字符数之间的差值。 4. 当输入的字符数达到最大限制时...

    统计字数的textarea

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

    js限制显示字数

    在本文中,我们将详细探讨如何使用JavaScript来限制显示和输入的字数。 1. **限制输入字数** 当用户在表单字段(如文本框`&lt;input type="text"&gt;`或文本区域`&lt;textarea&gt;`)中输入时,可以使用JavaScript监听`keyup`...

    jq textarea动态 显示剩余字符

    textarea还剩余字数统计,支持复制粘贴的时候统计字数

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

    在这个例子中,我们获取了`textarea`元素以及用于显示剩余字数的`counter`元素,然后在每次用户输入时更新计数器的显示。如果用户输入的字数超过设定的最大限制,我们会截取前`maxLimit`个字符,确保不超过限制,并...

    jquery新浪发布微博textarea文本框限制文字字数表单

    以上代码会实时计算textarea中的字符数,并更新剩余字数显示。 五、优化与扩展 1. 可以添加颜色提示,当达到一定限制(如90%)时,显示警告色。 2. 添加阻止用户输入超过限制的字符功能,一旦达到最大字数,禁用...

    textarea显示行号

    `textarea-line-number`是一个JavaScript插件,专门用于为`textarea`提供显示行号的功能,提高了用户体验,使得用户在查看或编辑多行文本时能更清晰地了解每一行的位置。 这个插件的工作原理主要是通过监听`...

    使用JavaScript限制TextArea多行文本域的可输入字数

    为了提高用户体验,我们还可以在`textarea`下方添加一个实时显示剩余字数的元素,如下所示: ```html &lt;textarea id="myTextarea" rows="4" cols="50"&gt;&lt;/textarea&gt; 剩余字数:&lt;span id="remainingChars"&gt;100&lt;/span&gt;...

    如何实现textarea中获取动态剩余字数的方法

    这样,我们就可以为每个`textarea`调用`changeLength`函数,实现多`textarea`的动态剩余字数显示。注意,这里的600是预设的最大字数,你可以根据需求更改这个值。同时,如果要实现更通用的功能,还可以考虑将最大...

    js和jquery分别实现对textarea字数的限制

    js和jquery分别实现对textarea字数的限制,精彩

    动态显示输入文字字数

    超级加密 3000一款功能强大的文件加密和文件夹加密软件。主要针对于进常对重要文件加密和文件夹加密的用户。该软件有超快和最强的文件加密、文件夹加密功能,采用先进的加密算法,使你的文件加密和文件夹加密后,...

    angularjs实现textarea文本输入字数限制功能

    至此,我们已经成功实现了AngularJS中textarea的字数限制功能,包括了输入验证和实时更新的字数显示。这个功能可以帮助我们确保用户输入的数据符合预期的格式,同时也能提供良好的交互体验。 在提供的压缩包文件`...

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

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

    jQuery textarea文本框输入文字字数限制提示代码

    本示例中,我们将探讨如何使用jQuery实现textarea文本框的字数限制功能,并实时提示用户输入的字符数量。 首先,让我们了解jQuery的基本概念。jQuery通过一个"$"符号作为入口,提供了一种简洁的方式来选择DOM元素、...

Global site tag (gtag.js) - Google Analytics