仿微博字符限制效果實(shí)現(xiàn)代碼

更新時(shí)間：2012年04月20日 01:03:39 作者：

字符限制公司項(xiàng)目中有個(gè)這樣的東西，大家用微博的都明白哈

這是初始狀態(tài)

輸入文字變成這樣，這里會(huì)區(qū)分圓角半角，2個(gè)半角的文字算一個(gè)。

這個(gè)是超出的樣子

如果超出了點(diǎn)擊提交，會(huì)有紅色閃動(dòng)提示

好了，效果就是這樣子，都是js的。。用的話，記得加個(gè)jq文件過來。。

這里是超出只有提示，還可以超出以后截掉多余的。。不過公司項(xiàng)目不用，說是體驗(yàn)不好~~~

復(fù)制代碼代碼如下:

 
var oH2 = $("#spetit_word");//提示文字 
var oTextarea = $("#p_qa_content");//輸入框 
var oButton = $("#bt-ico");//按鈕 

復(fù)制代碼代碼如下:

 
oTextarea.live("keyup", function () { 
Limit(oTextarea, 280, oH2); 
}) 
oButton.live("click", function () { 
if (font_count < 0 || font_count == null || font_count == 140) { 
Error(oTextarea); 
} else { 
alert('發(fā)布成功！'); 
} 
}); 

復(fù)制代碼代碼如下:

 
var font_count; 

function WordLength(obj) { 
var oVal = obj.val(); 
var oValLength = 0; 
oVal.replace(/\n*\s*/, '') == '' ? oValLength = 0 : oValLength = oVal.match(/[^ -~]/g) == null ? oVal.length : oVal.length + oVal.match(/[^ -~]/g).length; 
return oValLength 
} 
function Error(obj) { 
var oTimer = null; 
var i = 0; 
oTimer = setInterval(function () { 
i++; 
i == 5 ? clearInterval(oTimer) : (i % 2 == 0 ? obj.css("background-color", "#ffffff") : obj.css("background-color", "#ffd4d4")); 
}, 100); 
} 
//obj-要檢查的輸入框, iNow-多少字, tit-提示框 
function Limit(obj, iNow, tit) { 
var oValLength = WordLength(obj); 
font_count = Math.floor((iNow - oValLength) / 2); 
if (font_count >= 0) { 
tit.html("你還可以輸入<strong>" + font_count + "</strong>字"); 
return true; 
} else { 
tit.html("已超出<strong style='color:red'>" + Math.abs(font_count) + "</strong>字"); 
return false; 
} 
return font_count; 
} 

您可能感興趣的文章:

相關(guān)文章

JavaScript實(shí)現(xiàn)的選擇排序算法實(shí)例分析
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的選擇排序算法,結(jié)合實(shí)例形式分析了選擇排序的原理、實(shí)現(xiàn)步驟與相關(guān)操作技巧,需要的朋友可以參考下
2017-04-04
微信小程序—setTimeOut定時(shí)器的問題及解決
這篇文章主要介紹了微信小程序—setTimeOut定時(shí)器的問題及解決,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-07-07
微信小程序云開發(fā)實(shí)現(xiàn)搜索功能
這篇文章主要為大家詳細(xì)介紹了微信小程序云開發(fā)實(shí)現(xiàn)搜索功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-05-05
JavaScript中顏色模型的基礎(chǔ)知識(shí)與應(yīng)用詳解
顏色模型，是用來表示顏色的數(shù)學(xué)模型。比如最常見的?RGB模型，使用?紅綠藍(lán)?三色來表示顏色。本文就來和大家講講JavaScript中顏色模型的基礎(chǔ)知識(shí)與應(yīng)用吧
2023-02-02
window.event.keyCode兼容IE和Firefox實(shí)現(xiàn)js代碼
window.event.keyCode兼容IE和Firefox具體實(shí)現(xiàn)代碼如下，感興趣的朋友可以參考下哈
2013-05-05
Javascript對(duì)象屬性方法匯總
這篇文章主要是對(duì)Javascript對(duì)象屬性方法進(jìn)行了詳細(xì)的匯總介紹。需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2013-11-11
js仿360開機(jī)效果
這篇文章主要為大家詳細(xì)介紹了js仿360開機(jī)效果，并且封裝一個(gè)帶回調(diào)函數(shù)的緩動(dòng)動(dòng)畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-12-12
JavaScript實(shí)現(xiàn)定時(shí)任務(wù)隊(duì)列的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript實(shí)現(xiàn)一個(gè)基于一定時(shí)間間隔連續(xù)執(zhí)行任務(wù)隊(duì)列的功能,文中的示例代碼講解詳細(xì),需要的小伙伴可以參考下
2023-11-11
Bootstrap Tooltip顯示換行和左對(duì)齊的解決方案
小編在使用Bootstrap的Tooltip功能時(shí)遇到一些小問題，換行丟失，文字不是左對(duì)齊。下面小編給大家介紹下Bootstrap Tooltip顯示換行和左對(duì)齊的解決方案，感興趣的朋友一起看看吧
2017-10-10
ES6基礎(chǔ)之默認(rèn)參數(shù)值
這篇文章主要介紹了ES6基礎(chǔ)之默認(rèn)參數(shù)值，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-02-02