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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery实现限制input框  textarea文本框输入字符数量的方法</title>
</head>
<script src="http://j2.58cdn.com.cn/js/jquery-1.8.3.js"></script><!--依赖jquery-->
<body>
用户名:<input type="text" name="username" id="username" >
<span style="display:none;border:0;float:right;margin-right:50px" id="t2" >用户名长度为3-6位</span>
<!--我微信号 (WX-APP-PC) -->
<script>
(function($) {
  $.fn.extend( {
    limiter: function(limit, elem) {
      $(this).on("keyup focus", function() {
        setCount(this, elem);
      });
      function setCount(src, elem) {
        var chars = src.value.length;
        if (chars > limit) {
          src.value = src.value.substr(0, limit);
          chars = limit;
          $(‘#t2‘).show();
        }else{
            $(‘#t2‘).hide();
        }
        elem.html( limit - chars );
      }
      setCount($(this)[0], elem);
    }
  });
})(jQuery);

//To setup the limiter, simply include a call similar to the one below:
var elem = $("#username");
$("#username").limiter(6, elem);
</script>
</body>
</html>

原文地址:https://www.cnblogs.com/zc290987034/p/8618064.html

时间: 2024-10-08 11:13:26

jQuery实现限制input框 textarea文本框输入字符数量的方法的相关文章

jQuery实现textarea文本框带有半透明文本提示效果

jQuery实现textarea文本框带有半透明文本提示效果:textarea文本框一般用于编辑大段的文本,比如编辑器或者简单的留言回复之类的功能,有的在textarea文本框的有默认的提示语言,下面就介绍一下如何使用jQuery实现此功能.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content

Jquery实现 TextArea 文本框根据输入内容自动适应高度

原文 Jquery实现 TextArea 文本框根据输入内容自动适应高度 在玩微博的时候我们可能会注意到一个细节就是不管是新浪微博还是腾讯微博在转发和评论的时候给你的默认文本框的高度都不会很高,这可能是版面的限制和用户通常只转播或者评论一个短句有关.但是当你输入超过一行文字的时候,TextArea自动适应高度,大大改善了体验,这样用户就可以看到全部的文字.不用再去拖动文本框的滚动条. 如下图: 这些在平时的项目中挺实用的,所以抽空封装了一个文本框根据输入内容自适应高度的插件 - TextArea

获取textarea文本框所选字符光标位置索引,以及选中的文本值;textarea高度自适应,随着内容增加高度增加;获取输入框中的光标位置

获取textarea文本框所选字符光标位置索引,以及选中的文本值 $.fn.selection = function () { var s, e, range, stored_range; if (this[0].selectionStart == undefined) { var selection = document.selection; if (this[0].tagName.toLowerCase() != "textarea") { var val = this.val()

将div变成可编辑的状态,你造么?QQ空间中的发表说说的文本框其实就是一个DIV,而非textarea文本框

<div contenteditable="true">可以编辑里面的内容</div> 如果你在BODY里面加上contenteditable="true",可以发现该属性是多么的神奇.因此我们可以给HTML标签设置contenteditable="true"属性则可以对该标签进行编辑. contenteditable属性兼容所有浏览器(IE6之前的版本是否兼容未测试) 在有些时候我们完全可以用DIV去替代input或者t

设置textarea文本框不可以拖动改变大小

设置textarea文本框不可以拖动改变大小:在默认状态下,textarea文本框可以使用鼠标拖动调整大小,可能在某些情况下需要禁止此功能.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <titl

html5与js关于input[type=&#39;text&#39;]文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的value点击全选状态onclick=&quot;select();&quot;。做购物车页面时会要用到。

关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的点击全选状态onclick="select();".做购物车页面时会要用到. input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange: 1.onchange事件与onpropertychange事件的区别:onchange事件在内容改变(两次

HTML:&lt;input type=&quot;text&quot;&gt;文本框不可编辑的方式

1.<input type="text" name="name" value="姓名" disabled /> 该方式显示的文本框内容“姓名”呈灰色显示. 2.<input type="text" name="name" value="姓名" readonly="readonly" /> 文本框正常显示,只是无法获得光标,不能编辑. 3.<

IE input X 去掉文本框的叉叉和password输入框的眼睛图标

IE input X 去掉文本框的叉叉和password输入框的眼睛图标 从IE 10開始,type="text" 的 input 在用户输入内容后.会自己主动产生一个小叉叉(X),方便用户点击清除已经输入的文本. 对于type="password"的 input 则会在右方显示一个小眼睛的图标,占击这个图标能够显示已经输入的内容. 好是好,但有时候会画蛇添足,比方已经用js控制了这个功能的时候. 仅仅要使用下面CSS代码可轻松实现隐藏IE浏览器自带的文本删除but

如何让 textarea 文本框 高度自动伸缩

个人博客:柚子青年. 原文链接:如何让 textarea 文本框 高度自动伸缩 本文主要讲的是如何让 textarea 文本框 自动伸缩 原理:每次输入文字后重置文本框默认高度 判断是否出现滚动条 动态修改高度 . $(this).change(function () { this.style.height = 'height'; // height = textarea 默高度 if (this.scrollHeight >= this.offsetHeight) { // 判断是否出现滚动条