文本域textarea显示输入剩余字数

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>显示输入剩余字数</title>
<script>
    var maxstrlen=160;
    function Q(s){return document.getElementById(s);}
    function checkWord(c){
        len=maxstrlen;
        var str = c.value;
        myLen=getStrleng(str);
        var wck=Q("wordCheck");
        if(myLen>len*2){
            c.value=str.substring(0,i+1);
        }
        else{
            wck.innerHTML = Math.floor((len*2-myLen)/2);
           }
    }
    function getStrleng(str){
        myLen =0;
        i=0;
        for(;(i<str.length)&&(myLen<=maxstrlen*2);i++){
        if(str.charCodeAt(i)>0&&str.charCodeAt(i)<128)
        myLen++;
        else
        myLen+=2;
    }
    return myLen;
}
</script>

</head>

<body>

<div style="font-size:16px">

控制输入框字符输入,计算输入字符总数,显示剩余字数;<br>

一个英文字符算一个字符,一个中文字符算两个字符计算。

</div>

<div>

<textarea onKeyUp="javascript:checkWord(this);" onMouseDown="javascript:checkWord(this);" name="content" style="overflow-y:scroll"></textarea>

</div>

<DIV>

还可以输入<span style="font-family: Georgia; font-size: 26px;" id="wordCheck">160</span>个字符 </div>

</body>

</html>
时间: 2024-10-10 13:59:33

文本域textarea显示输入剩余字数的相关文章

jQuery实现的计算textarea可输入剩余字数

jQuery实现的计算textarea可输入剩余字数:textarea一般是用来输入文字性内容的,不过出于各种原因的考虑,文字的数量一般是受到限制的,下面就通过实例代码介绍一下,如何实现此效果,代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy

JS实现动态提示文本框可输入剩余字数(类似发表微博数字提示)

一.实现效果: 为了更直观的体现用户在文本框输入文本时能看到自己输入了多少字,项目中需要通过判断提示文本框剩余可输入字数. html & JS: 1 <div> 2 <textarea name="content" id="content" onkeyup="javascript:checkWords(this);" onmousedown="javascript:checkWords(this);"

bootstrap-表单控件——文本域textarea

1.运行效果如图所示 2.实现代码如下 <!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <title>表单控件--文本域textarea</title>     <!--

Bootstrap 表单控件一(单行输入框input,下拉选择框select ,文本域textarea)

单行输入框,常见的文本输入框,也就是input的type属性值为text.在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootstrap框架都是通过input[type=“?”](其中?号代表type类型,比如说text类型,对应的是input[type=“text”])的形式来定义样式的. 为了让控件在各种表单风格中样式不出错,需要添加类名“form-control”,如: <form role="form"

Bootstrap系列 -- 16. 文本域textarea

文本域和原始使用方法一样,设置rows可定义其高度,设置cols可以设置其宽度.但如果textarea元素中添加了类名“form-control”类名,则无需设置cols属性.因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%或auto. <form role="form"> <div class="form-group"> <textarea class="form-control&quo

Textarea 单击鼠标 清除默认字/点击文本域 默认内容消失/点击文本框 删除预置内容

Textarea 单击鼠标 清除默认字/点击文本域 默认内容消失/点击文本框 删除预置内容. Textarea 单击鼠标 清除默认字 点击文本域 默认内容消失 点击文本框 删除预置内容 在留言框.搜索栏或者Email订阅栏中有一段默认的文本,比如“请输入您的内容”,如果你在其中点击(窗体获取焦点),这段默认的文本就会自动消失. 第一步:添加代码方式: <head> …. <script type=”text/javascript”> function clearDefault(el

表单控件+下拉列表+文本域

一.表单控件 1.<input type="text" name="user"  size="20默认" /> 2.<input type="password" name="code"  /> 3.<input type="radio" name="sex[]" value="1" />+<input ty

HTML&amp;CSS基础学习笔记1.23-表单的文本域和下拉列表

文本域 <textarea>标签定义多行的文本输入控件. 平时在网页上的一些需要输入比较多的内容的输入框,比如回复帖子,回答问题等,都可以用<textarea>标签. <textarea>文本区中可容纳无限数量的文本,可以通过 [cols] 和 [rows] 属性来规定 <textarea> 的尺寸. 例如: <textarea cols=”100” rows=”6”></textarea>   表示尺寸为100列6行的文本域. 实例

JavaScript:文本域事件处理

文本域往往可以输入大量的文字信息,但是在文本域上有一些键盘的处理事件:onkeydown.onkeypress.onkeyup. 范例一:观察文本域的键盘事件处理 代码如下: 效果图如下: 默认状态:     任意输入一个字,操作键盘时:   范例二:限制文本域数字的长度,当文字超过时,提交按钮被禁止使用. 代码如下: <!doctype html> <html lang = "zh-CN"> <head> <meta charset=&quo