`
f002489
  • 浏览: 271699 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

利用js控制textarea的maxLength

阅读更多

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>方法1--兼容ie+ff,光标闪烁截断多余文字</title>
<script type="text/javascript">
function ismaxlength(obj){
var mlength=obj.getAttribute? parseInt(obj.getAttribute("maxlength")) : ""
if (obj.getAttribute && obj.value.length>mlength)
obj.value=obj.value.substring(0,mlength)
}
</script>
</head>
<body>
<textarea maxlength="10" onkeyup="return ismaxlength(this)"></textarea>
</body>
</html>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>方法2--兼容ie+ff,ctrl复制文字会超出范围.html</title>
<script language="javascript" type="text/javascript">
<!--
function imposeMaxLength(Object, MaxLen)
{
return (Object.value.length <MaxLen);
}
-->
</script>
</head>
<body><textarea name="myName" onkeypress="return imposeMaxLength(this, 10);" ></textarea>
</body>
</html>

 

<html>
<head>
<title>方法3--无法通过ctrl+c复制(FF无效)</title>
</head>
<body>
<form method=post name=ceshi action="index.htm">
   <textarea name=textarea1 onpropertychange=checkMaxLen(this,10,0)></textarea>
</form>
   <script language=javascript>
var oldValue=new Array();
function checkMaxLen(obj,maxlength,num){
   if(obj.value.length>maxlength){
    obj.value=oldValue[num];
   }
   else{
    oldValue[num]=obj.value;
   }
}
</script>
</body>
</html>

 

<html>
<head>
<title>方法4-标闪烁截断多余文字(FF无效)</title>
<script type="text/javascript">
var textarea_maxlen = {
isMax : function (){
   var textarea = document.getElementById("area");
   var max_length = textarea.maxLength;
if(textarea.value.length > max_length){
   textarea.value = textarea.value.substring(0, max_length);
   }
},
disabledRightMouse : function (){
document.oncontextmenu = function (){ return false; }},
enabledRightMouse : function (){
document.oncontextmenu = null;}};
</script>
</head>
<body>
<textarea id="area" maxLength="10"   onkeyup="textarea_maxlen.isMax()"   onfocus="textarea_maxlen.disabledRightMouse()"   onblur="textarea_maxlen.enabledRightMouse()" rows="20" cols="100"></textarea>
</body>
</html>


方法5-js和css控制,显示还可输入的字数:
MaxLength on a Textarea:http://blog.offbeatmammal.com/post/2006/10/26/MaxLength-on-a-Textarea.aspx

分享到:
评论

相关推荐

    textarea不能通过maxlength属性来限制字数的解决方法

    然而,HTML标准中并没有提供`maxlength`属性来限制`&lt;textarea&gt;`的字符数,因此必须采用其他方法来实现这一需求。 一种常见的限制字符数的方法是使用JavaScript(或其他脚本语言)。基本思路是通过监听`&lt;textarea&gt;`...

    jquery.confine:Textarea maxlength,正确完成

    Textarea maxlength完成。 HTML textarea本身不像文本输入一样实现maxlength属性。 jQuery.confine是一个简单的jQuery插件,可以正确地实现此功能,避免了大多数天真的实现会遇到的许多问题,同时还可以选择利用...

    textarea.7z

    总的来说,利用`jQuery`处理`textarea`的字数限制是网页开发中一个实用且常见的技巧。它可以帮助提升用户体验,避免因为用户输入过多内容而引发的问题,同时也能更好地控制服务器的负载。通过对`textarea`的实时监控...

    JQuery为textarea添加maxlength属性并且兼容IE

    `jQuery` 是一个广泛使用的JavaScript库,它提供了丰富的API来简化DOM操作,如事件处理和兼容性处理,因此我们可以借助 `jQuery` 来实现 `textarea` 的 `maxlength` 功能。 首先,我们需要理解 `keyup` 事件。`...

    jquery对textarea的长度进行验证

    在本文中,我们将深入探讨如何利用jQuery来扩展textarea元素的功能,并结合`jquery.validate.js`库进行长度验证,确保用户输入的文本长度符合预设要求。 首先,我们需要了解`textarea`元素的基本用法。`textarea`是...

    jquery 实时统计textarea内的字符个数

    在本场景中,我们关注的是如何利用jQuery实现一个功能,即实时统计textarea输入框内的字符个数。这个功能常见于各种表单提交场景,如社交媒体的评论或博客编辑,用来限制用户输入的最大字符数,提升用户体验。 首先...

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

    总的来说,这个示例展示了如何利用jQuery进行DOM操作、事件监听和简单的数据处理,为用户提供友好的交互体验。在实际的网页开发中,这样的功能可以被广泛应用,例如评论系统、表单验证等场景。通过深入理解jQuery的...

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

    在上面的代码中,`inputText`是我们在AngularJS控制器中的一个变量,它将实时反映textarea中的文本内容。 接下来,我们要实现字数限制功能。这可以通过创建一个新的自定义指令来完成。在AngularJS中,自定义指令...

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

    "效果超酷的textarea的输入字数限提示"是一个针对HTML `&lt;textarea&gt;` 元素的JS特效,它能提升用户在填写表单时的体验,通过实时显示剩余可输入字数,帮助用户更好地控制他们的输入内容。本文将深入探讨这个功能的实现...

    js实现textarea限制输入字数

    与单行输入框不同,textarea没有内置的maxlength属性来限制用户输入的字符数。因此,开发者需要采用JavaScript来实现对textarea输入字数的限制。 首先,我们来讨论限制textarea字数的原理。当用户在textarea中输入...

    用JavaScript限制textarea输入长度 (For: IE、Firefox …)[

    为了解决这个问题,我们可以利用JavaScript来实现一个兼容各个主流浏览器的textarea输入长度限制功能。 首先,让我们理解HTML5的`maxlength`属性。`maxlength`属性是HTML5新增的,它定义了textarea或input元素最多...

    maxlength:jQuery MaxLength插件

    2. **下载并引入插件**:从项目提供的`maxlength-master`压缩包中,找到并引入`dist`目录下的`maxlength.min.js`文件。 3. **初始化插件**:在DOM加载完成后,通过`$('textarea').maxlength()`来初始化插件。可以...

    javascript textarea字数限制

    本文将详细探讨如何利用JavaScript来限制HTML元素中的文本长度,主要关注于`textarea`元素,但同样的逻辑同样适用于`input`元素中的文本输入框(text类型)。 ### 理解`maxlength`属性 HTML5标准中引入了`...

    自定义html maxlength

    通过合理利用JavaScript和其他前端技术,我们可以实现对`maxlength`的个性化定制,提高用户体验,并确保数据的正确性和一致性。对于任何处理用户输入的网页应用,这都是一个值得深入研究的领域。

    jquery maxlength使用说明

    本篇教程主要讲述了如何在HTML表单中利用jquery.maxlength.js插件对文本输入框或文本区域的字符输入进行限制。jquery.maxlength.js是一个简洁的jQuery插件,它提供了一种便捷的方式来提示用户输入长度,并可以设置当...

    Javascript maxlength检查解决方案

    首先,我们可以利用JavaScript的事件监听器来实现在用户输入时即时检查字符数。例如,可以添加`oninput`事件来监听输入事件,并在事件处理函数中检查当前输入的字符数是否超过限制: ```javascript document....

    微信小程序 textarea 组件详解及简单实例

    微信小程序的`textarea`组件是用于创建多行文本输入框的元素,...了解这些信息可以帮助开发者更好地利用`textarea`组件构建用户友好的输入界面。希望这些信息对您的小程序开发有所帮助,感谢您对微信小程序开发的支持!

    微信小程序 textarea 详解及简单使用方法

    总的来说,微信小程序的`textarea`组件虽然在事件处理上与常规的HTML元素有所不同,但通过合理利用`bindblur`和`form`表单,我们可以实现类似的功能。不过,这种方法可能会带来一些功能上的限制,开发者需要根据实际...

Global site tag (gtag.js) - Google Analytics