JavaScript仿微博輸入框效果(案例分析)
更新時(shí)間：2016年12月06日 17:23:06 投稿：mrr
這篇文章給大家分享一個(gè)小的JavaScript的案例，就是模仿微博輸入框的效果，非常不錯(cuò)，對(duì)微博輸入框效果感興趣的朋友通過(guò)本文學(xué)習(xí)吧
這篇文章給大家分享一個(gè)小的JavaScript的案例，就是模仿微博輸入框的效果。
效果圖：
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>仿微博輸入框效果</title>
<script src="jquery.js"></script>
</head>
<body>
<textarea name="" id="" cols="30" rows="10"></textarea>
<sapn>您還可以輸入<strong style="color:red">140</strong>個(gè)字</sapn>
</body>
<script>
//給文本域響應(yīng)鍵盤(pán)按下事件
$('textarea').keyup(function(){
var maxLength = 140;
var len = $(this).val().length;
$('strong').text(maxLength-len);
//判斷輸入是否超過(guò)140個(gè)數(shù)
if(parseInt($('strong').text()) < 0){
$('strong').text(0);
//截取前140個(gè)字符并重新塞到文本域中
var content = $(this).val().substring(0,140);
$(this).val(content);
}
});
</script>
</html>
以上所述是小編給大家介紹的JavaScript仿微博輸入框效果(案例分析),希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
相關(guān)文章
微信小程序websocket聊天室的實(shí)現(xiàn)示例代碼
這篇文章主要介紹了微信小程序websocket聊天室的實(shí)現(xiàn)示例代碼，小程序本身對(duì)http、websocket等連接均有諸多限制，所以這次項(xiàng)目選擇了node.js自帶的ws模塊。感興趣的可以參考一下2019-02-02
javascript中的字符串替換及字符串分割在某些情況下還是比較實(shí)用的，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下2013-12-12
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)導(dǎo)航跟隨效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
詳解?Map?和?WeakMap?區(qū)別以及使用場(chǎng)景
這篇文章主要介紹了詳解?Map?和?WeakMap?區(qū)別以及使用場(chǎng)景,Map本質(zhì)上是一個(gè)鍵值對(duì)的集合,WeakMap?只能將對(duì)象作為鍵名,下面來(lái)一起倆姐更多詳細(xì)內(nèi)容吧，希望這一篇文章能讓你對(duì)?Map?有更好的理解，或者能夠幫你理解?Map?和?WeakMap2022-01-01
JS簡(jiǎn)單獲取當(dāng)前日期和農(nóng)歷日期的方法
這篇文章主要介紹了JS簡(jiǎn)單獲取當(dāng)前日期和農(nóng)歷日期的方法,涉及javascript日期運(yùn)算與字符串轉(zhuǎn)換相關(guān)操作技巧,需要的朋友可以參考下2017-04-04
js文件中直接alert()中文出來(lái)的是亂碼的解決方法
下面小編就為大家?guī)?lái)一篇js文件中直接alert()中文出來(lái)的是亂碼的解決方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11
一個(gè)字符串中出現(xiàn)次數(shù)最多的字符 統(tǒng)計(jì)這個(gè)次數(shù)【實(shí)現(xiàn)代碼】
下面小編就為大家?guī)?lái)一篇一個(gè)字符串中出現(xiàn)次數(shù)最多的字符 統(tǒng)計(jì)這個(gè)次數(shù)【實(shí)現(xiàn)代碼】。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考2016-04-04
js實(shí)現(xiàn)下拉框二級(jí)聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)下拉框二級(jí)聯(lián)動(dòng)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
淺談js的ajax的異步和同步請(qǐng)求的問(wèn)題
下面小編就為大家?guī)?lái)一篇淺談js的ajax的異步和同步請(qǐng)求的問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
在網(wǎng)頁(yè)中，經(jīng)常見(jiàn)到進(jìn)度條效果，那么這些個(gè)性的進(jìn)度條組件效果是怎么實(shí)現(xiàn)的呢，下面腳本之家小編給大家分享Bootstrap進(jìn)度條組件知識(shí)詳解，感興趣的朋友要求學(xué)習(xí)吧2016-05-05