textarea文本域字数控制---并显示已输入字数

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
  <script
 src="http://code.jquery.com/jquery-1.4.1.js"></script>
<script type="text/javascript">

    //字数限制
    window.onload = function() {
        //（document）
        document.getElementById(‘note‘).onkeyup = function() {
            document.getElementById(‘text-count‘).innerHTML=this.value.length;
        }
    //（jquery）
        $(‘#note2‘).keyup(function() {
        //    var val=$(‘#note2‘).val();
        //    var len=val.length;
        var len=this.value.length
                    $(‘#text-count2‘).text(len);

        })
    }
</script>
<div>
<textarea cols="40" rows="5" id="note"
                    name="note" maxlength="100" value=""
                    onkeyup="this.value=this.value.substring(0, 100)"
                    placeholder="最多可输入100字"></textarea><span id="text-count" value="">0</span>/100
                    </div>
<div>
<textarea cols="40" rows="5" id="note2"
                    name="note2" maxlength="100" value=""
                    onkeyup="this.value=this.value.substring(0, 100)"
                    placeholder="最多可输入100字"></textarea><span id="text-count2" value="">0</span>/100
                    </div>
 </body>
</html>

时间： 2024-08-28 19:15:54

textarea文本域字数控制---并显示已输入字数的相关文章

textarea文本域的高度随内容的变化而变化

用css控制textarea文本域的高度随内容的变化而变化,不出现滚动条. CSS代码: 复制代码代码如下: .t_area{ width:300px; overflow-y:visible } <textarea class="t_area"> 随便在这里输入内容,textarea的高度会随着你输入的内容而变化,不会出现滚动条,实现很简单,就是一段css:overflow-y:visible </textarea> 首先,原则上实现textarea自适应必须

textarea文本域保存的一些思考

textarea文本域保存文本到数据库的时候,数据要做一定的处理,否则数据库的内容不能正确显示在页面上.主要原因就是换行符的不一致造成的. 具体思路是:(1)页面上的内容存到数据库的时候,要把换行符转换成"<br/>": 我在action层: // 使用这句话对页面上传过来的换行符进行处理 liwei 20140724 1115 assignment_teacher_comment = assignment_teacher_comment.replaceAll("

textarea文本域宽度和高度（width、height）自己主动适应变化处理

文章来源:http://www.cnblogs.com/jice/archive/2011/08/07/2130069.html <HTML> <HEAD> <TITLE>textarea宽度.高度自己主动适应处理方法</TITLE>  <style type="text/css"> .comments { width:100%;/*自己主动适应父布局宽度*/ overflo

HTML学习笔记域元素(form表单、textarea文本域、fieldset域集合、input使用) 案例第四节（原创）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单</title> </head> <body>  <form> 用户名:  <input type="text">

文本域，支持多行文本输入

当用户需要在表单中输入大段文字时,需要用到文本输入域. 语法: <textarea rows="行数" cols="列数">文本</textarea> 1.<textarea>标签是成对出现的,以<textarea>开始,以</textarea>结束. 2.cols :多行输入域的列数. 3.rows :多行输入域的行数. 4.在<textarea></textarea>标签之间可以

textarea文本域

textarea中换行问题一旦用nl2br函数处理会多个\n导致十分难看也无法形成文本框默认效果前台的html如果用<br/>处理也会给后台的编辑造成困难所以在编辑的时候这样处理把\n字符串换成\n换行即可编辑里的显示效果是这样的当在前台显示的时候就直接处理一下显示为<br/>后即可显示效果是这样的

css固定textarea文本域尺寸

大家都知道,textarea元素在chrome等浏览器下可以被拖拉从而改变大小,对于查看textarea里面的内容来说相当方便,但是有时候我们为了保持网页的美观,不得不想要禁掉这个功能,禁止用户随意拉动textarea的大小,其实很简单,只需要用css加一个小小的属性,代码如下: textarea{ resize:none; }

textarea文本域值中含有大量\t\r\n问题

最近在发现了一个问题,很是头疼,textarea值中有大量的制表符,尝试了很多办法,最终找到了解决办法,希望能帮到同样有此困扰的你. <textarea> <c:out value="${desc}"/> </textarea> 这么写就会出现上述问题,其实解决办法很简单,如下 <textarea><c:out value="${desc}"/></textarea>

CSS3：固定textarea文本域宽度

textarea在一些浏览器上可以被拖拉改变大小,为了保持美观,可以通过 CSS3 resize 属性禁掉 textarea{resize:none; //不允许用户调整元素大小}