`
lemo
  • 浏览: 90857 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

动态显示textarea中输入的字数

阅读更多
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="robots" content="all" />
<meta name="keywords" content="JS,Blog,ASP,designing,with,web,standards,xhtml,css,graphic,design,layout,usability,accessibility,w3c,w3,w3cn" />
<meta name="descrīption" content="JS限制textarea输入框输入字数" />
<title>JS限制textarea输入框输入字数</title>
<script type="text/javascript">

function checktext(text)
{
  allValid = true;
  for (i = 0;  i < text.length;  i++)
  {
   if (text.charAt(i) != " ")
   {
    allValid = false;
    break;
   }
  }
return allValid;
}

function xx(message,total,used,remain)
{
 var max;
 max = total.value;
 if (message.value.length > 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;
 }
}


</script>
<style type="text/css">
<!--
* {padding:0; margin:0;}
body, html {text-align:left; font-size:12px; line-height:150%; margin:0 auto; background:#fff; padding-top:20px;}
fieldset {padding:10px; width:550px; margin:0 auto;}
legend {font-size:14px; font-weight:bold;}
.inputtext {border:none; background:#fff;}
-->
</style>
</head>
<body>
<form action="SaveData.asp" method="post" onSubmit="return datacheck();">
<fieldset><legend>请输入内容</legend>
<textarea name="Memo" rows="10" wrap=PHYSICAL cols="75" onKeyDown="xx(this.form.Memo,this.form.total,this.form.used,this.form.remain);" onKeyUp="xx(this.form.Memo,this.form.total,this.form.used,this.form.remain);"></textarea>
<p>最多字数:
<input disabled maxLength="4" name="total" size="3" value="200" class="inputtext">
已用字数:
<input disabled maxLength="4" name="used" size="3" value="0" class="inputtext">
剩余字数:
<input disabled maxLength="4" name="remain" size="3" value="200" class="inputtext"></td>
</p>
</fieldset>
</form>
</body>

</html>
分享到:
评论

相关推荐

    手机端textarea中输入字数监控

    通过上述代码示例可以看出,实现手机端textarea中输入字数监控的功能并不复杂,主要依赖于JavaScript对DOM事件的监听以及对CSS样式的动态修改。开发者需要注意的是,对于不同语言环境下的输入(尤其是东亚语言),...

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

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

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

    限制textarea输入字数 #charCount { display: inline-block; margin-left: 5px; } &lt;textarea id="inputText" rows="4" cols="50" maxlength="100"&gt;&lt;/textarea&gt; &lt;span id="charCount"&gt;0/100 var ...

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

    在"效果超酷的textarea的输入字数限提示"这个压缩包中,可能就包含了实现这些效果的代码示例和CSS样式。 这个功能在许多实际场景中都非常有用,比如论坛发帖、在线留言、博客写作等。它不仅能够帮助用户避免输入...

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

    //显示限制输入字符method function textAreaChange(obj){ var $this = $(obj); var count_total = $this.next().children('span').text(); var count_input = $this.next().children('em'); var area_...

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

    要限制textarea的输入字数,我们首先要获取textarea元素。在HTML中,我们可以创建一个textarea并为其设置一个ID,如`id="myTextarea"`。然后,我们可以在jQuery的选择器中使用这个ID来选择这个元素: ```html ...

    动态显示输入文字字数

    数据粉碎功能 可以把你想删除但怕在删除后被别人用数据恢复软件恢复的数据彻底在电脑中删除。 文件夹保护功能 还有文件夹的加密码、隐藏、伪装等保护功能。 磁盘保护功能 将您的软盘、硬盘和光驱等所有驱动器有选择...

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

    总之,通过结合CSS的美化技巧和JavaScript的动态功能,我们可以创建一个既美观又实用的`textarea`输入字数限制提示,为用户带来愉快的使用体验。这只是一个基础示例,开发者可以根据项目需求进一步定制和优化,比如...

    textarea剩余字数

    在实际应用中,`textarea`的内容可以通过JavaScript动态设置,这使得可以实现动态加载或者根据用户行为改变`textarea`的内容。例如,通过`document.getElementById('example').value = '新文本';`可以改变`textarea`...

    统计字数的textarea

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

    Textarea限制输入文本长度

    - **实时显示剩余可输入字符数**:在用户输入时动态显示还剩多少字符可以输入,增强用户体验。 - **多语言支持**:针对不同语言环境下的字符长度计算,例如全角字符和半角字符的区别。 #### 四、示例代码 下面提供...

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

    本文将详细介绍如何使用JavaScript来控制textarea文本域的输入字数限制。 首先,从给定的文件内容中,我们可以看到一个简单的HTML页面结构,其中包含一个textarea元素和一个用于显示剩余字符数的文本框。页面通过...

    字数输入限制按百分比例显示代码

    "字数输入限制按百分比例显示代码"是一种实现这一功能的技术,它允许开发者动态地根据输入框的总字符数限制来显示当前已输入的百分比,为用户提供实时反馈。 首先,我们要理解这个功能的基本工作原理。通常,我们会...

    基于jquery的textarea发布框限制文字字数输入(添加中文识别)

    根据给定的文件信息,以下是对标题、描述、标签和部分内容中提及的知识点的详细说明: ...通过本例的学习,开发者可以掌握在实际项目中如何动态限制textarea输入长度,并对中英文字符进行准确的计数。

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

    在本文中,我们将详细了解如何使用JavaScript技术实现textarea文本框中动态显示剩余字数的功能。 ### 知识点一:textarea元素的基本介绍 `&lt;textarea&gt;`元素是一个基于Web的表单控件,可以用于输入多行文本。它通常...

    输入一个字,文本域中显示可输入字数减1

    该功能主要通过JavaScript实现,当用户在文本域中输入字符时,实时计算并更新文本域下方提示的“还可输入字数”。具体来说,是通过监听`onkeydown`事件来触发计算逻辑。 #### 实现原理 - **获取文本域值**:首先,...

    jQuery计算textarea中文字数(剩余个数)的小程序

    这个示例程序展示了如何使用jQuery来实时计算textarea中的中文字数,并显示剩余可输入的字数。以下是这个jQuery小程序的关键知识点: 1. **HTML 结构**: 首先,HTML部分包含一个`&lt;div&gt;`容器,一个`&lt;p&gt;`标签显示...

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

    在本场景中,"动态计算文本框内的可输入字数"是一个用户界面(UI)设计的问题,主要应用于网页、桌面应用或移动应用中,目的是为用户提供即时反馈,显示当前文本框内还能输入多少字符。这个功能对于限制用户输入长度...

Global site tag (gtag.js) - Google Analytics