js判斷文本框剩余可輸入字?jǐn)?shù)的方法
更新時(shí)間：2015年02月04日 09:18:26 作者：whazhl
這篇文章主要介紹了js判斷文本框剩余可輸入字?jǐn)?shù)的方法,可實(shí)現(xiàn)直觀顯示文本框可輸入字?jǐn)?shù)的功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了js判斷文本框剩余可輸入字?jǐn)?shù)的方法。分享給大家供大家參考。具體如下：
目的：為了更直觀的體現(xiàn)用戶在文本框輸入文本時(shí)能看到自己輸入了多少字，項(xiàng)目中需要通過(guò)判斷提示文本框剩余可輸入字?jǐn)?shù)
JS實(shí)現(xiàn)方法
復(fù)制代碼 代碼如下:
<html>
<head runat="server">
<title></title>
<script type="text/javascript">
var maxstrlen = 160;
function Q(s) { return document.getElementById(s); }
function checkWord(c) {
len = maxstrlen;
var str = c.value;
myLen = getStrleng(str);
var wck = Q("wordCheck");
if (myLen > len * 2) {
c.value = str.substring(0, i + 1);
}
else {
wck.innerHTML = Math.floor((len * 2 - myLen) / 2);
}
}
function getStrleng(str) {
myLen = 0;
i = 0;
for (; (i < str.length) && (myLen <= maxstrlen * 2); i++) {
if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 128)
myLen++;
else
myLen += 2;
}
return myLen;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="font-size: 16px">
控制輸入框字符輸入，計(jì)算輸入字符總數(shù),顯示剩余字?jǐn)?shù);<br>
一個(gè)英文字符算一個(gè)字符，一個(gè)中文字符算兩個(gè)字符計(jì)算。
</div>
<div>
<textarea onkeyup="javascript:checkWord(this);" onmousedown="javascript:checkWord(this);"
name="content" style="overflow-y: scroll"></textarea>
</div>
<div>
還可以輸入<span style="font-family: Georgia; font-size: 26px;" id="wordCheck">160</span>個(gè)字符
</div>
</form>
</body>
</html>
<head runat="server">
<title></title>
<script type="text/javascript">
var maxstrlen = 160;
function Q(s) { return document.getElementById(s); }
function checkWord(c) {
len = maxstrlen;
var str = c.value;
myLen = getStrleng(str);
var wck = Q("wordCheck");
if (myLen > len * 2) {
c.value = str.substring(0, i + 1);
}
else {
wck.innerHTML = Math.floor((len * 2 - myLen) / 2);
}
}
function getStrleng(str) {
myLen = 0;
i = 0;
for (; (i < str.length) && (myLen <= maxstrlen * 2); i++) {
if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 128)
myLen++;
else
myLen += 2;
}
return myLen;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="font-size: 16px">
控制輸入框字符輸入，計(jì)算輸入字符總數(shù),顯示剩余字?jǐn)?shù);<br>
一個(gè)英文字符算一個(gè)字符，一個(gè)中文字符算兩個(gè)字符計(jì)算。
</div>
<div>
<textarea onkeyup="javascript:checkWord(this);" onmousedown="javascript:checkWord(this);"
name="content" style="overflow-y: scroll"></textarea>
</div>
<div>
還可以輸入<span style="font-family: Georgia; font-size: 26px;" id="wordCheck">160</span>個(gè)字符
</div>
</form>
</body>
</html>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
JavaScript使用循環(huán)和分割來(lái)替換和刪除元素實(shí)例
一個(gè)JavaScript實(shí)例，使用循環(huán)和分割來(lái)替換和刪除元素，很簡(jiǎn)單，但很實(shí)用，建議初學(xué)者學(xué)習(xí)下2014-10-10
200行HTML+JavaScript實(shí)現(xiàn)年會(huì)抽獎(jiǎng)程序
這篇文章主要為大家詳細(xì)介紹了HTML+JavaScript實(shí)現(xiàn)年會(huì)抽獎(jiǎng)程序的200行代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-01-01
JavaScript 保護(hù)變量不被隨意修改的實(shí)現(xiàn)代碼
本文通過(guò)實(shí)例代碼給大家分享JavaScript 保護(hù)變量不被隨意修改的實(shí)現(xiàn)方法，需要的朋友參考下吧2017-09-09
javascript實(shí)現(xiàn)富文本框選中對(duì)齊的思路與代碼
最近在項(xiàng)目中經(jīng)常遇到使用富文本框的情況,下面這篇文章主要給大家介紹了關(guān)于javascript實(shí)現(xiàn)富文本框選中對(duì)齊的思路與代碼,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
JavaScript移動(dòng)端常用事件之touch觸摸事件詳解
觸屏事件touch也稱為觸摸事件,touch對(duì)象代表一個(gè)觸摸點(diǎn),觸摸點(diǎn)可能是一根手指,也可能是一根觸摸筆,觸屏事件可響應(yīng)用戶手指(或觸摸筆)對(duì)屏幕或者觸控板操作,下面這篇文章主要給大家介紹了關(guān)于JavaScript移動(dòng)端常用事件之touch觸摸事件的相關(guān)資料,需要的朋友可以參考下2022-10-10
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)手機(jī)拍照上傳功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
微信小程序使用自定義組件導(dǎo)航實(shí)現(xiàn)當(dāng)前頁(yè)面高亮
這篇文章主要介紹了微信小程序使用自定義組件導(dǎo)航實(shí)現(xiàn)當(dāng)前頁(yè)面高亮，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
JavaScript高級(jí)程序設(shè)計(jì) 閱讀筆記（十二） js內(nèi)置對(duì)象Math
js內(nèi)置對(duì)象Math使用介紹， 需要的朋友可以參考下2012-08-08
本篇文章主要是對(duì)js中indexof的用法進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
在 JavaScript 中,new 關(guān)鍵字不僅是面向?qū)ο缶幊痰年P(guān)鍵要素,還是創(chuàng)建實(shí)例的重要手段,本文將深入探討 new 關(guān)鍵字的使用,理解它在對(duì)象創(chuàng)建和構(gòu)造函數(shù)調(diào)用中的作用,需要的朋友可以參考下2023-11-11