jQuery實(shí)時統(tǒng)計(jì)輸入框字?jǐn)?shù)及限制
更新時間：2020年06月24日 15:09:43 作者：Jeslie-He
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)時統(tǒng)計(jì)輸入框字?jǐn)?shù)及限制，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
項(xiàng)目中經(jīng)常會用到文本輸入框，而且需要限制輸入的字?jǐn)?shù)。
下面分享一個 jQuery 實(shí)時統(tǒng)計(jì)輸入框輸入字?jǐn)?shù)及限制輸入字?jǐn)?shù)的方法，代碼如下：
HTML：簡單的寫一下，能實(shí)現(xiàn)功能即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery實(shí)時統(tǒng)計(jì)輸入框字?jǐn)?shù)及限制的方法</title>
<style>
#content{
border: none;
outline: none;
resize: none;
width: 200px;
height: 100px;
border: 1px solid #ccc;
border-radius: 6px;
padding: 4px;
}
</style>
</head>
<body>
<textarea id="content" placeholder="新消息內(nèi)容" ></textarea>
<span class="contentcount">0</span>/200
<script src="./jquery.js"></script>
<script>
$('#content').bind('input propertychange',function(){
var count = $(this).val().length; //獲取輸入的字?jǐn)?shù)
if(count > 200){
var char = $(this).val();
char = char.substr(0,200); //截取前200的字符串
$(this).val(char);
count = 200;
alert('超出200了')
}
$('.contentcount').text(count);
})
</script>
</body>
</html>
效果如下
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了jQuery分組選擇器簡單用法,結(jié)合實(shí)例形式分析了使用jQuery分組選擇器動態(tài)設(shè)置頁面元素屬性相關(guān)操作技巧,需要的朋友可以參考下2019-04-04
easyUI combobox實(shí)現(xiàn)聯(lián)動效果
這篇文章主要為大家詳細(xì)介紹了easyUI combobox實(shí)現(xiàn)聯(lián)動效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
當(dāng)鼠標(biāo)停留在表頭邊框線上，接著拖動鼠標(biāo)，會在表格中出現(xiàn)一條隨鼠標(biāo)移動的豎線，最后放開鼠標(biāo)，表格列寬會被調(diào)整2014-09-09
jQuery+Ajax實(shí)現(xiàn)用戶名重名實(shí)時檢測
這篇文章主要為大家詳細(xì)介紹了jQuery Ajax實(shí)現(xiàn)用戶名重名實(shí)時檢測，針對用戶注冊時出現(xiàn)的用戶名重名問題進(jìn)行自動檢測，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
JQuery實(shí)現(xiàn)點(diǎn)擊div以外的位置隱藏該div窗口
鼠標(biāo)點(diǎn)擊div外的地方讓div窗口隱藏消失，實(shí)現(xiàn)方法有很多，在本文將為大家介紹下jquery中時如何實(shí)現(xiàn)的，感興趣的朋友不要錯過了哈2013-09-09
jquery中的sortable排序之后的保存狀態(tài)的解決方法
其實(shí)在前年的這個時候，我就有用過這個sortable組件，那時候搞了個個人網(wǎng)站（可惜后來關(guān)了），首頁就用到了這種拖拽的效果。2010-01-01
在本篇文章里小編給大家分享了關(guān)于jquery獲取img的src值實(shí)例介紹和相關(guān)內(nèi)容，有需要的朋友們學(xué)習(xí)下。2019-01-01
輕松學(xué)習(xí)jQuery插件EasyUI EasyUI實(shí)現(xiàn)樹形網(wǎng)絡(luò)基本操作(2)
這篇文章主要幫助大家輕松學(xué)習(xí)jQuery插件EasyUI，針對EasyUI實(shí)現(xiàn)樹形網(wǎng)絡(luò)基本操作，分為三大方面：動態(tài)加載、添加分頁、以及惰性加載節(jié)點(diǎn)，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要幫助大家快速理解jQuery瀏覽器窗口、網(wǎng)頁文檔及可視窗口的各種高度,需要的朋友可以參考下2014-07-07
這篇文章主要介紹了JQuery事件委托原理與用法,結(jié)合具體實(shí)例形式分析了jQuery事件委托相關(guān)概念、原理及使用技巧,需要的朋友可以參考下2019-05-05