javascript textarea字数限制

这一个是读取textarea的maxlength属性的值，进行计算，思路很好，但修改起来就麻烦啊，不过对于js爱好者来说是个不错的参考，通过读取属性值进行控制。

textarea字数限制 练习代码多有参考网络 by ahuinan

var TextUtil = new Object();
TextUtil.NotMax = function(oTextArea){
var maxText = oTextArea.getAttribute("maxlength");
if(oTextArea.value.length > maxText){
oTextArea.value = oTextArea.value.substring(0,maxText);
alert("超出限制");
}
}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

下面的这段代码，直接计算文档的长度

input 字数限制

function Chck()
{
var len = 0;
var str=document.getElementById("input1").value;
for (var i=0; i127 || str.charCodeAt(i)==94) {
len += 2;
} else {
len ++;
}
}
alert(len);
if(len>20)
{
alert("对不起，不能大于20个字节，中文算两个！");
}
}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

下面的这段代码是网络上应用比较广泛的，有剩余字数提示的效果代码，推荐

JS限制textarea输入框输入字数

max) {
message.value = message.value.substring(0,max);
used.value = max;
remain.value = 0;
alert("留言不能超过 200 个字!");
}
else {
used.value = message.value.length;
remain.value = max - used.value;
}
}

-->

请输入内容

最多字数：

已用字数：

剩余字数：

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

更多的计算字符串长度代码，可以参考这一篇文章。
http://www.jb51.net/article/21343.htm

赞 (0)

相关推荐

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

    现在流行的Twitter等微博客网站,有一个很好的用户体验,就是在文本框中输入文字的时候,会自动统计输入的字符,并显示用户还能输入的字符,在限制了140个字的微博客中,这样的小提示可以很好的增强用户体验. 如果实现这种技术呢,我进行了一些研究,发现实现其实挺简单,几行代码就能完成输入字符统计功能,经过实际测试,其对文字的统计与Twitter等微博客的完全相同. 使用方法是,先增加一个span,用于显示剩余的字数,然后在Textarea中,加入一个onkeydown和onkeyup的事件,调用另一

  • js实现textarea限制输入字数

    实现textarea限制输入字数(包含中文只能输入10个,全ASCII码能够输入20个) textarea称文本域,又称文本区,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到.与单行文本框text控件不同,它不能通过maxlength属性来限制字数,为此必须寻求其他方法来加以限制以达到预设的需求. 通常的做法就是使用#脚本语言来实现对textarea文本域的字数输入限制,简单而实用.假设我们有一个id为 txta1 的textarea文本区,我们可以通过以下代码限制它的键盘输入字数为1

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

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

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

  • 利用Angular.js限制textarea输入的字数

    前言 大家可能都遇到过在输入的时候做出限制的需求,本文介绍的是通过Angular.js限制textarea输入字数的方法,有需要的朋友们可以参考以下实例. 实例代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>AngularJS 简单应用程序--输入字数限制</title> <!-- @author:sm @email:sm0

  • JS控制文本框textarea输入字数限制的方法

    复制代码 代码如下: <html>     <head>     <title>JS限制Textarea文本域字符个数</title>     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />     <SCRIPT LANGUAGE="JavaScript">     <!--

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

    案例介绍:我们常见到有的网站有textarea文本框,当你输入的时候,下面有文字提示还能输入多少个字,今天就是要实现这个功能.当然,由于一个页面有好几个textarea,所以使用单个js逻辑进行控制是不行的,得小小的进行封装一下.当然我的封装还有缺漏,但是基本功能是实现了. 首先介绍下单个textarea实现案例 html部分: <textarea id="text_txt1"></textarea> <span id ="num_txt1&qu

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

    现在流行的Twitter等微博客网站,有一个很好的用户体验,就是在文本框中输入文字的时候,会自动统计输入的字符,并显示用户还能输入的字符,在限制了140个字的微博客中,这样的小提示可以很好的增强用户体验. 如果实现这种技术呢,我进行了一些研究,发现实现其实挺简单,几行代码就能完成输入字符统计功能,经过实际测试,其对文字的统计与Twitter等微博客的完全相同. 使用方法是,先增加一个span,用于显示剩余的字数,然后在Textarea中,加入一个onkeydown和onkeyup的事件,调用另一

  • javascript textarea字数限制

    这一个是读取textarea的maxlength属性的值,进行计算,思路很好,但修改起来就麻烦啊,不过对于js爱好者来说是个不错的参考,通过读取属性值进行控制. textarea字数限制 练习代码多有参考网络 by ahuinan var TextUtil = new Object(); TextUtil.NotMax = function(oTextArea){ var maxText = oTextArea.getAttribute("maxlength"); if(oTextAr

  • javascript TextArea动态显示剩余字符

    <div class="form"> <div class="con"> <ul> <li>剩余字数的限制</li> <li><textarea cols="40" rows="8" id="text1"></textarea></li> <li>剩余字符:<span id=&quo

  • JavaScript输入框字数实时统计更新

    JavaScript输入框字数实时统计更新

    在前端开发中,很多情况下需对输入内容进行验证.实时统计功能,对于定长输入而言,可以让用户实时明确输入界限,并合理安排内容. 字数实时统计更新 下面将以[消息内容]为例,设计实现输入框字数实时统计更新功能. 项目架构如下: message  message.css     message.js     message.tpl 1. 在message.tpl文件中定义网页元素 //移动端微信公众号开发 <div class="weui-cell__bd"> <textar

  • Javascript实现字数统计

    字数统计功能,原理是给textarea添加onKeyup事件,事件读取textarea内容并获得长度,并赋值给统计字数的那个文本节点,这里有一点要注意的是添加onKeypress和onKeydown事件也能实现效果,但都有些不足,会在某些情况下造成误解,我都试了下,感觉只用一个onKeyup事件是最明智的选择. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title&g

  • javascript textarea光标定位方法(兼容IE和FF)

    今天在做一个博客转发的功能,就像新浪微薄转播的那个功能一样,有一个textArea,就是我们发微薄的那个框,别人的微薄都有一个转发的按钮,当我们点击这个转发按钮的时候,他的微薄就会进入到textArea中,看起来很简单的文本框赋值,其实难点就在于,这时候的光标是定位在最前面的. 于是搜索了baidu,google,找到了 IE下面的方法 复制代码 代码如下: var tea=document.getElementById("文本框的ID"); var txt=textArea.crea

  • JQuery 表单中textarea字数限制实现代码

    复制代码 代码如下: $('#FashionStatement').val(''); var limitNum = 1000; var pattern = '还可以输入' + limitNum + '字'; $('#statementRowChk').html(pattern); $('#FashionStatement').keyup( function() { var remain = $(this).val().length; if (remain > 1000) { pattern =

  • javascript textarea支持图形编辑

    这样的话稍微修改下,评论等简单的textarea的表情插入就可以直接显示出来了 而不是只显示emot了 比较实用 标题起的确切,但如果叫"现textarea支持编辑"似乎更废话 代码 New Document 我的logo: var editor = document.getElementById('editor'); var img = document.createElement('img'); img.src = 'http://www.jb51.net/images/logo.

  • 关于JavaScript限制字数的输入框的那些事

    关于JavaScript限制字数的输入框的那些事

    前言 最近产品需要做不少输入框,产品想要的交互效果是:用户可以输入中英文,随着用户输入能实时显示已经输入的字符个数,当超过数量限制时输入框边框变红,同时给用户提示信息. 这交互听起来没啥问题,技术实现上似乎也没啥难点.但是当我实现出来以后遇到中文输入法就有坑了. 怎么个坑呢,且看下文~~ 实时监测输入框内容长度所遇到的坑使用 oninput事件来监听 使用这个oninput事件的好处有2个: 当用户通过右键复制改变输入框内容时,可以监听到: 只有在输入框内容发生变化时才会触发此事件,比如用户按下

随机推荐