js如何判斷輸入字符串長(zhǎng)度

更新時(shí)間：2015年12月16日 09:00:08 投稿：lijiao

這篇文章主要介紹了js判斷輸入字符串長(zhǎng)度，漢字算兩個(gè)字符，字母數(shù)字算一個(gè)，感興趣的小伙伴們可以參考一下

js判斷輸入字符串長(zhǎng)度（漢字算兩個(gè)字符，字母數(shù)字算一個(gè)）

文本輸入時(shí)，由于數(shù)據(jù)庫(kù)表字段長(zhǎng)度限制會(huì)導(dǎo)致提交失敗，因此想到了此方法驗(yàn)證。

廢話不多說上代碼：

<html>
<head>
  <title>js判斷輸入字符串長(zhǎng)度（漢字算兩個(gè)字符，字母數(shù)字算一個(gè)）</title>
  <style type="text/css">
    .pbt {
      margin-bottom: 10px;
    }

    .ie6 .pbt .ftid a, .ie7 .pbt .ftid a {
      margin-top: 1px;
    }

    .cl:after {
      clear: both;
      content: ".";
      display: block;
      height: 0;
      visibility: hidden;
    }
  </style>
  <script type="text/javascript">
    //獲取字符串長(zhǎng)度（漢字算兩個(gè)字符，字母數(shù)字算一個(gè)）
    function getByteLen(val) {
      var len = 0;
      for (var i = 0; i < val.length; i++) {
        var a = val.charAt(i);
        if (a.match(/[^\x00-\xff]/ig) != null) {
          len += 2;
        }
        else {
          len += 1;
        }
      }
      return len;
    }
    // 只要鍵盤一抬起就驗(yàn)證編輯框中的文字長(zhǎng)度，最大字符長(zhǎng)度可以根據(jù)需要設(shè)定
    function checkLength(obj) {
      var maxChars = 80;//最多字符數(shù)   
      var curr = maxChars - getByteLen(obj.value);
      if (curr > 0) {
        document.getElementById("checklen").innerHTML = curr.toString();
      } else {
        document.getElementById("checklen").innerHTML = '0';
        document.getElementById("subject").readOnly = true;
      }
    }
  </script>
</head>
<body>
  <div class="pbt cl">
    <textarea id="subject" maxlength="80" onkeyup="checkLength(this)" accesskey="1" tabindex="11"></textarea>
    <span id="subjectchk">還可輸入
    <strong id="checklen" style="color: #FF0000">80</strong>
      個(gè)字符
    </span>
    <span id="postNameRule" class="spn_flag_1" style="display: none"></span>
  </div>
</body>
</html>

以上就是js判斷輸入字符串長(zhǎng)度的方法，希望對(duì)大家的學(xué)習(xí)有所幫助，學(xué)會(huì)如何判斷輸入字符串長(zhǎng)度。

您可能感興趣的文章:

js
字符串

相關(guān)文章

Javascript中瀏覽器窗口的基本操作總結(jié)
BOM全稱是brower object model(瀏覽器對(duì)象模型)，主要用于管理窗口及窗口間的通訊，其核心對(duì)象是window。說窗口，可能并不準(zhǔn)確。因?yàn)?，有的瀏覽器窗口可能包含多個(gè)標(biāo)簽頁(yè)，每個(gè)標(biāo)簽頁(yè)都有自己的window對(duì)象。本文將詳細(xì)介紹這些內(nèi)容，有需要可以參考學(xué)習(xí)。
2016-08-08
在javascript中使用com組件的簡(jiǎn)單實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄趈avascript中使用com組件的簡(jiǎn)單實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧，祝大家游戲愉快哦
2016-08-08
Javascript中內(nèi)建函數(shù)reduce的應(yīng)用詳解
內(nèi)建函數(shù)其實(shí)就是內(nèi)置函數(shù),reduce函數(shù)是ECMAScript5規(guī)范中出現(xiàn)的數(shù)組方法。在平時(shí)的工作中，相信大家使用的場(chǎng)景并不多，這篇文章給大家詳細(xì)介紹了函數(shù)reduce的應(yīng)用以及多重疊加，有需要的朋友們可以參考借鑒，下面來一起看看吧。
2016-10-10
微信小程序使用map組件實(shí)現(xiàn)路線規(guī)劃功能示例
這篇文章主要介紹了微信小程序使用map組件實(shí)現(xiàn)路線規(guī)劃功能,結(jié)合具體實(shí)例形式分析了微信小程序基于map組件的地理位置獲取、路徑規(guī)劃等相關(guān)操作技巧,需要的朋友可以參考下
2019-01-01
Firebug入門指南(Firefox瀏覽器)
據(jù)說，對(duì)于網(wǎng)頁(yè)開發(fā)人員來說，F(xiàn)irebug是Firefox瀏覽器中最好的插件之一。
2010-08-08
原生JS中slice()方法和splice()區(qū)別
slice()方法和splice()方法都是原生js中對(duì)數(shù)組操作的方法。那么他兩種有什么區(qū)別呢？今天通過本文教程給大家簡(jiǎn)單介紹下,需要的朋友可以參考下
2017-03-03
js實(shí)現(xiàn)模擬購(gòu)物商城案例
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)模擬購(gòu)物商城案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-05-05
D3.js 實(shí)現(xiàn)帶伸縮時(shí)間軸拓?fù)鋱D的示例代碼
這篇文章主要介紹了D3.js 實(shí)現(xiàn)帶伸縮時(shí)間軸拓?fù)鋱D的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-01-01
JS簡(jiǎn)單驗(yàn)證上傳文件類型的方法
這篇文章主要介紹了JS簡(jiǎn)單驗(yàn)證上傳文件類型的方法,涉及javascript文件遍歷及字符串截取、匹配等相關(guān)操作技巧,需要的朋友可以參考下
2017-04-04
layui實(shí)現(xiàn)動(dòng)態(tài)和靜態(tài)分頁(yè)
本篇文章通過實(shí)例給大家分享了layui實(shí)現(xiàn)動(dòng)態(tài)和靜態(tài)分頁(yè)的詳細(xì)方法，以及效果展示，有需要的朋友可以跟著參考學(xué)習(xí)下。
2018-04-04