[JavaScript]全角、半角での文字数制限

Question

分からないこと

以下のように半角だとmaxlengthが3になるよう制限が入れてあります。

<input type="text" v-model="hogehoge" maxlength="3">

現在の実装ですと、

• 半角のみの場合、フロント側から綺麗に見える　OK
• 全角+半角の場合、フロント側から綺麗に見える ok
• 全角のみの場合、フロント側から綺麗に見えない（1文字ズレてしまう）

フロント側で綺麗に見えるのは全角のみの場合は2文字となりますので
全角のみの場合だとmaxlength=3ではなく2としたいです。

こちらの制限方法で詰まっております。

やりたいこと

全角のみの場合は最大2文字と制限したい

現在までに試してみたこと

• 制限の前にcountができるのか試してみました

textLength(t){
      var textLength = 0;
      for(var i=0;i<t.length;i++){
        var chr = t.charCodeAt(i);
        if((chr >= 0x00 && chr < 0x81) ||
           (chr === 0xf8f0) ||
           (chr >= 0xff61 && chr < 0xffa0) ||
           (chr >= 0xf8f1 && chr < 0xf8f4)){
          //半角文字
          textLength += 1;
        }else{
          //それ以外の文字
          textLength += 1.5;
        }
      }
      return textLength;
    },


// 実行するとこんな感じです
var t = "aあ"
console.log(this.textLength(t)) => 2.5

Comments

[think49]

> しかし、全角だと、上記の制限は聞いておらず、何文字でも入力が可能な状態です。

再現しません。
全角も3文字制限になっています。
https://jsfiddle.net/h25pL3fy/

[saider_san]

文面に記載の情報が誤っておりました。
ご指摘ありがとうございます。
修正致しました。

[think49]

> ・全角のみだと最大2文字制限としたい（console.log('ああ')）
> ・半角全角が合わさっている場合は最大3文字制限（console.log('あaa')）

後者の条件は 'ああa' を許可しているように読めますが、前者と矛盾します。
後者は「半角2文字 + 全角1文字」なのでは？

[saider_san]

すみません、投稿した後に気付いたのですが
そもそも半角全角の場合は3文字の制限が効いているので
（'aああ','あaa'共に）
知りたいこととして、全角のみの場合には2文字制限としたい　が正しいですね。
こちらの文面が誤っています。

度々失礼いたしました。
修正させていただきます。

Answer 1

入力段階では'ああa'の可能性があるので
保存段階で全て全角であれば最後の文字をカットする方式にしました。
ご覧いただいた方々、ありがとうございました。
解決とさせていただきます。

Comments

[think49]

patern属性を想定していました。
<input type="text" pattern="[\u0000-\u00FF]{1,3}|[^\u0000-\u00FF]{1,2}|[\u0000-\u00FF]{0,2}[^\u0000-\u00FF][\u0000-\u00FF]{0,2}" maxlength="3">