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)文章
『JavaScript』限制Input只能輸入數(shù)字實(shí)現(xiàn)思路及代碼
一個(gè)文字方塊必須限制只能輸入數(shù)字（或是小數(shù)點(diǎn)）并且要支援 IE 和 Firefox，接下來(lái)為大家介紹下如何解決這個(gè)需求2013-04-04
javascript創(chuàng)建數(shù)組的最簡(jiǎn)代碼
2008-02-02
jQuery 使用 $ 符號(hào)作為 jQuery 的簡(jiǎn)介方式。某些其他 JavaScript 庫(kù)中的函數(shù)（比如 Prototype）同樣使用 $ 符號(hào)。2011-04-04
今天小編就為大家分享一篇在layui中select更改后生效的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
這篇文章主要介紹了JavaScript中Number的對(duì)象解析，Number對(duì)象是數(shù)值對(duì)應(yīng)的包裝對(duì)象，可以作為構(gòu)造函數(shù)使用，也可以作為工具函數(shù)使用，感興趣的朋友可以參考一下下面文章內(nèi)容2022-08-08
BootStrap下的彈出框加載select2框架失敗的解決方法
本文通過(guò)簡(jiǎn)單的代碼給大家介紹了BootStrap下的彈出框加載select2框架失敗的解決方法，需要的朋友參考下吧2017-08-08
javascript實(shí)現(xiàn)簡(jiǎn)單搜索功能
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)簡(jiǎn)單搜索功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
這篇文章主要介紹了js身份證判斷方法支持15位和18位,需要的朋友可以參考下2014-03-03
layui 表格操作列按鈕動(dòng)態(tài)顯示的實(shí)現(xiàn)方法
今天小編就為大家分享一篇layui 表格操作列按鈕動(dòng)態(tài)顯示的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
基于Web Audio API實(shí)現(xiàn)音頻可視化效果
這篇文章主要介紹了基于Web Audio API實(shí)現(xiàn)音頻可視化效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-06