要在textarea中限制输入字符的长度,比如在twitter中要限制字符为140个,可实现的方法有:

   1.

<textarea name="A" cols="45" rows="2" onKeyDown='if (this.value.length>=20){event.returnValue=false}'>aaaa</textarea>

   2. 我们也可以将判断写在函数中,如果输入的长度超过显示,就显示提示信息,如下:
       <form name =
"testform">
         <textarea name="A" cols="45" rows="2"
>aaaa</textarea>
           <input type="button" onclick =
"checkValid()" value= "提交">
          </form>
<script
language="javascript">
function checkValid()
{
 var a =
document.testform.A;
 
 if(a.value.length > 20)
 {
 
alert("输入的备注框长度不能超过20个字符!");
  return false;
 }
 return true;
}

3.  上述两种方法无法判断如果使用copy后的准确字数,可以使用onpropertychange属性。

onpropertychange可以用来判断预定元素的value值,当元素的value值发生变化时判断事件就会被触发,仅关心被监测元素的
value值,避开了输入的来源,从而可以比较理想地达成我们的限制字数这一目的。它属于JS范畴,可以在表单方框区代表中嵌套使用,以下是代码和效果样式,可以像上面那样测试输入,你会发现它真正达到目的:不管用什么方式输入,它只能输入100个字(汉字或其他小解符号):

代码:

<textarea onpropertychange="if(value.length>100)
value=value.substr(0,100)" class="smallArea" cols="60" name="txta"
rows="8"></textarea>

4.  在<textarea>的onKeyup,onKeyDown和onPaste事件中调用js方法,例:

<tr align="center">
                 还可以输入<span
id="validNum">140</span>字</td>
        </tr>
       
<tr  align="center">
            <td>
               
<textarea name="talkTopic" id="talkTopic" rows=4 cols="50" maxlength='140'
onKeyDown="checkLength()"
                 onKeyUp="checkLength()"
onPaste="checkLength()"></textarea>
            </td>
   
    </tr>

function checkLength(){
        var value =
document.getElementById("talkTopic").value;
       
if(value.length>140){
           
document.getElementById("talkTopic").value=document.getElementById("talkTopic").value.substr(0,
140);
        }else{
           
document.getElementById("validNum").innerHTML = 140 - value.length;
       
}
    }

在checkLength()中,验证textarea的长度,如果超过了限制的长度,则取前140个字符。

textarea中限制输入字符长度的更多相关文章

  1. textarea中限制输入字符长度(实用版)

    textarea称文本域,又称文本区,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到.与单行文本框text控件不同,它不能通过maxlength属性来限制字数,为此必须寻求其他方法来加以限制 ...

  2. jQuery实现限制input框 textarea文本框输入字符数量的方法

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. elementUi中input输入字符光标在输入一个字符后,光标失去焦点

    elementUi中input输入字符光标在输入一个字符后,光标就退出,无法输入需要再次聚焦然后输入一个字符又再次退出 首先,用elementUi正常用v-model绑定输入的值是不会造成光标退出的, ...

  4. vue 限制输入字符长度

    一.watch方法: <input v-model="textareaValue" type="textarea" placeholder="请 ...

  5. summernote 富文本编辑器限制输入字符长度

    项目中需要一个比较简单的富文本编辑器,于是选中了summernote .虽然比较轻量,但是在开发中也遇到了几个问题,在此记录一下. 1:样式和bootstrap冲突,初始化之后显示为: .note-e ...

  6. BeyondCompare两个文件中同一行字符长度不一致的文件对比,比如pi文件对比(xjl456852原创)

    假设有两个文件,里面存放的数字都只有一行,但长度不一样,对比时会有问题 示例文件: 对比示例如图: 左边的pi的字符串比较长,右边的比较短. 右边的pi的值不是从开始的第一个位置对比的,这样的情况是有 ...

  7. iOS 学习 - 7.限制 TextField 输入字符长度

    #pragma mark -- TextField代理 -(BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange: ...

  8. as3中textField输入字符时,一次性过长后自动换行

    txt_show.text = showStr; var str:String = txt_show.text; var strlen:int = str.length; var len:int = ...

  9. textarea中的文字自动换行问题

    在textarea中设置输入内容的自动换行,也是在CSS中设置word-wrap:break-word; 属性.需要额外注意的是textarea元素本身有一个warp属性,其取值含义如下: off:不 ...

随机推荐

  1. HDOJ2011多项式求和

    多项式求和 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submi ...

  2. DOS批处理命令-goto命令

    goto是一个流程控制语句 rem goto语句是一个大家都不怎么喜欢的语句,因为他的随意性太强,导致可维护性大大的降低. 语法: goto [lable]   [lable]是bat程序中任意定义的 ...

  3. 大家注意:升级 win8.1 火狐浏览器 谷歌浏览器 搜狗五笔输入法 都不能用啦

    大家注意:升级 win8.1 火狐浏览器 谷歌浏览器 搜狗五笔输入法 都不能用啦 我的电脑64位 win8 thinkpad e531,8G内存 刚在线升级完8.1,发现这些问题,大家注意,有知道问题 ...

  4. ATL一:CWindowImpl

    1,#ifdef _ATL_DISABLE_NO_VTABLE#define ATL_NO_VTABLE#else#define ATL_NO_VTABLE __declspec(novtable)# ...

  5. 如何管好.net的内存(托管堆和垃圾回收)

    一:C#标准Dispose模式的实现 需要明确一下C#程序(或者说.NET)中的资源.简单的说来,C#中的每一个类型都代表一种资源,而资源又分为两类: 托管资源:由CLR管理分配和释放的资源,即由CL ...

  6. [CSS]三角形

    CSS盒子模型 当我们把padding和width,height全部设置为0,border设为一个较大的像素时 即:我们需要什么方向的三角形,只需把其余的三角形背景色设置为transparent:

  7. input属性disabled和readonly的区别

    两种属性的写法如下: 1.<input type="text" name="name" value="xxx" disabled=&q ...

  8. Android类库常用类库一览

    在Android SDK中包括很多包文件,通过了解这些包的功能也有助于了解可以开发的功能. 在Android类库中,各种包写成android.*的方式,重要包的描述如下所示: android.app ...

  9. Django配置静态文件(CSS\js)及Django调用JS、CSS、图片等静态文件

    1 新建一项目: root@python:django-admin.py startproject csstest root@python:cd csstest root@python:ls csst ...

  10. jsp+oracle 排序分页+Pageutil类

    1.rownum和排序 Oracle中的rownum的是在取数据的时候产生的序号,所以想对指定排序的数据去指定的rowmun行数据就必须注意了. SQL> select rownum ,id,n ...