jquery maxlength使用說明
更新時間：2011年09月09日 16:43:16 作者：
在本教程中，我將告訴你如何使用一些常見的形式領(lǐng)域jquery.maxlength.js
CSS:
<style type="text/css">
body
{
line-height: 1.5;
font: 14px/1.5 arial,serif;
color: #AAA;
}
.notification
{
border: 3px solid #D55B5B;
background-color: #FFCDCD;
padding: 5px;
}
.tip
{
color: #00A8C6;
padding-left:2px;
}
</style>
JavaScript:
<script type="text/javascript" src="Scripts/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="Scripts/maxlength.js"></script>
<script type="text/javascript">
$(document).ready(function (e) {
$('#txtContent').maxlength(
{
maxCharacters: 20, //限制字符數(shù)
status: true, //是否開啟字?jǐn)?shù)提示
statusClass: 'tip', //提示框的樣式
notificationClass: 'notification', //超出限制時文本框的樣式
showAlert: false, //超出限制時是否彈出提示框
alertText: '最多只能輸入20個字符', //超出限制時彈出框的提示文字
slider:true //提示幻燈效果
}
);
});
</script>
html:
<body>
<div>
<textarea id="txtContent" cols="60" rows="5"></textarea>
</div>
</body>
復(fù)制代碼 代碼如下:
<style type="text/css">
body
{
line-height: 1.5;
font: 14px/1.5 arial,serif;
color: #AAA;
}
.notification
{
border: 3px solid #D55B5B;
background-color: #FFCDCD;
padding: 5px;
}
.tip
{
color: #00A8C6;
padding-left:2px;
}
</style>
JavaScript:
復(fù)制代碼 代碼如下:
<script type="text/javascript" src="Scripts/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="Scripts/maxlength.js"></script>
<script type="text/javascript">
$(document).ready(function (e) {
$('#txtContent').maxlength(
{
maxCharacters: 20, //限制字符數(shù)
status: true, //是否開啟字?jǐn)?shù)提示
statusClass: 'tip', //提示框的樣式
notificationClass: 'notification', //超出限制時文本框的樣式
showAlert: false, //超出限制時是否彈出提示框
alertText: '最多只能輸入20個字符', //超出限制時彈出框的提示文字
slider:true //提示幻燈效果
}
);
});
</script>
html:
復(fù)制代碼 代碼如下:
<body>
<div>
<textarea id="txtContent" cols="60" rows="5"></textarea>
</div>
</body>
效果如下：
相關(guān)文章
圖片滾動效果想必大家都已司空見慣了吧，接下來本文介紹下jQuery+CSS實現(xiàn)圖片滾動，感興趣的你可不要錯過了哈，希望可以幫助到你2013-03-03
jquery實現(xiàn)的動態(tài)回到頂部特效代碼
這篇文章主要介紹了jquery實現(xiàn)的動態(tài)回到頂部特效代碼,涉及jQuery基于時間函數(shù)的定時遞歸調(diào)用實現(xiàn)帶緩沖效果的移動功能,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
本文通過一段示例代碼給大家介紹了基于jQuery解決ios10以上版本縮放問題，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-11-11
以WordPress為例講解jQuery美化頁面Title的方法
鼠標(biāo)移動到超鏈接時顯示Title提示即是所謂Title美化的一般手段,這里我們就以WordPress為例講解jQuery美化頁面Title的方法,需要的朋友可以參考下2016-05-05
這篇文章主要為大家分享了Jquery日歷插件e-calendar升級版,e-calendar是一個jQuery插件,創(chuàng)建一個事件日歷它很容易使用,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要介紹了如何利用jQuery+css+html模擬實現(xiàn)淘寶購物車模塊，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起動手嘗試一下2022-03-03
花N長時間積累的Jquery插件，希望大家喜歡。大家還有什么新的插件，請留言，我們一并收錄。感謝大家的支持。2011-05-05
這篇文章主要給大家介紹了如何利用jquery實現(xiàn)實時更新歌詞的方法,文中給出了詳細(xì)的實現(xiàn)思路和示例代碼，對大家的參考借鑒具有一定的價值，有需要的朋友下面來跟著小編一起學(xué)習(xí)學(xué)習(xí)吧。2017-01-01
這篇文章主要介紹了jQuery的animate動畫方法及動畫排隊問題解決的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用jQuery，感興趣的朋友可以了解下2021-05-05
圖片信息的浮動顯示的效果，在網(wǎng)頁應(yīng)用中還是比較流行的，下面為大家詳細(xì)介紹下使用jquery是如何實現(xiàn)的，喜歡的朋友可以參考下2013-08-08