質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.58%

アルファベットっぽい文字の誤入力を防ぐ方法

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 5
  • VIEW 2,892

SystemAjisai

score 169

 前提・実現したいこと

Webシステムの入力項目に、アルファベットっぽいけどアルファベットではない文字が入力されてしまい困っています。
例えば「Ⅴ」や「Ⅽ」や「K」です。
入力経路は何となくは分かっていて、日本語入力モードの時に「v」とうって変換ボタンを押した時にでてくる「V」っぽい文字を、どれが正しい「V」かわからず選んでしまっているようです。

こういった文字の入力があった場合に強調表示をしてユーザーに知らせたいのですが、どういう文字を抽出をしたらいいのかで困っています。
後述の通り、当初は上記の3文字だけ赤くする措置を取っていたのですが、さらに別の似たような文字が出てきてしまいました。
今は発覚するたびに1文字ずつ判定に追加してしのいでいる状態です。

全角文字を入れる必要がある項目で、通常はこういった文字の入力ミスをどうやてユーザーに伝えるのでしょうか?
もしくは、通常キーボードでうてないような文字の総称(「半角英数」のような感じ)はないでしょうか…。
そういう用語がわかれば何とか自分でも調べられそうなのですが、今はキーワードも思い浮かばない状態です。。

何かヒントでもいいのでアドバイス頂けたら嬉しいです。

※以前LinuxいうパソコンとWindowsでは文字の種類(コード?)が違うという話を聞いたことがあるのでタグに「Windows」を入れました。関係がなかったらすみません。。。

 発生している問題・エラーメッセージ

アルファベットと似た文字を間違えて入力される。

※※追記※※
何が困っているか書いた方がいいとアドバイス頂いたので追記をします。

このシステムは社内の生産管理システムで、顧客から送られてきた原材料等を加工して返すラインの管理をしています。
該当の項目は顧客側で送ってきた原材料の個体(便宜上ロット番号と呼んでいます)を特定するためのコードや名前のようなものが入っています。
多くは半角英数なのですが、一部日本語だったり全角英数だったり見たことないような文字が入っていたりします。
顧客からデータを受け取る時は、4割ぐらいはデータで受け取り、6割は紙で届くので人間が入力しています。
加工が終わると、終わりましたよという書類としてそのデータや書面を顧客に送り返します。

数か月前から書面でやりとりしていた顧客(お得意様)のシステムが変わって、弊社⇒顧客への送り返しだけデータでやりとりするようになりました。
その時にこの項目を顧客側のシステムで原材料の個体を特定するキーに使用されているようなのです。
今まで見た目がVなら実質なんでもよかった(人間はVと認識してくれるから)のに、システムでは区別されるので顧客側からクレームが来てしまっています。
入力する側の人間も今まで全半角すら区別していなかったような人たちですし、見た目がそっくりなので何を気を付けていいのかわからないという状態です。
そこで赤くして「あなたたちは赤がなくなるまで頑張るのです」という指導をしようとしています。

普段から変わった文字を入力している人たちは、変わった文字に精通しているので「変な文字は赤くしますが気にしないでください」が通用しそうなので、エラーにはできないけど赤くするぐらいはセーフと考えています。
※※※

 該当のソースコード

動作する環境
※フォーカスアウトで文字強調したdivをかぶせています。

<div id="vue-element">
  <div class="input-group">
    <label>項目名</label>
    <input type="text" v-model="komoku" @blur="highlightDisp=true" />
    <div v-html="highlight" class="over" v-show="highlightDisp" @click="click($event)"></div>
  </div>  
</div>
   new Vue({
    el: "#vue-element",
    data(){
      return {
        highlightDisp: true,
        komoku: "ABCDKFGH",
      }
    },
    computed:{
      highlight(){
        // ↓文字を判定しているところ
        const text = this.komoku.replace(/[ⅠⅭⅤⅯKⅩLⅮ]/g, 
        function(s){
          return '<span class="highlight">' + s + '</span>';
        });
        return text;
      }
    },
    methods:{
      click(event){
        this.highlightDisp = false;
        event.target.previousElementSibling.focus();
      }
    }
  });
  .input-group{
    box-sizing: border-box;
    width: 10rem;
    position:relative;
  }

  input, .over{
    font-size:14px;
    box-sizing: border-box;
    height: 30px;
    padding: 8px;
    width: 100%;
    border: 1px gray solid;
    background-color: #FFFDE7
  }
  .over{
    background-color:#ECEFF1;
    position:relative;
    top:-30px;
    vertical-align:middle;
    display: flex;
    align-items: center;
  }
  .highlight{
    font-weight:bold;
    color:red;
  }

 試したこと

●半角英数記号以外は全部赤くする
⇒全角英数を入力する人たちから紛らわしいと苦情殺到

●単純に「Ⅴ」「Ⅽ」「K」だったら赤くする
⇒別の文字を入力する人が現れてしまいイタチごっこに・・・

 補足情報(FW/ツールのバージョンなど)

ブラウザ:Google Chrome
OS(クライアント側):windows 7~10

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • maisumakun

    2018/11/14 15:42

    その入力欄に、「半角・全角の英字」以外に入りうる正当な文字はどのようなものでしょうか?

    キャンセル

  • SystemAjisai

    2018/11/14 15:49

    顧客が指定するコードのようなものなので全て把握しているわけではないのですが、「Å」(読み方不明)やローマ数字の「Ⅰ」や「Ⅱ」は入ってくることがあります。なのでエラーではなく強調表示をして「大丈夫ですか?」という問いかけにとどめようと思っています。

    キャンセル

  • asm

    2018/11/14 16:58

    余談ですが、その記号は「オングストローム」です。

    キャンセル

  • SystemAjisai

    2018/11/14 17:10

    ありがとうございます。社内では「鼻と口みたいなAのやつ」で定着していたので、あまりにカッコいい呼び方に驚きました。

    キャンセル

回答 4

checkベストアンサー

+6

ソースを見た限り、アルファベットっぽいけどアルファベットではない文字をブラックリストとして保持してその文字が入っているかどうかを判定している、と思います。
この方法だと、「アルファベットっぽいけどアルファベットではない文字」がどれだけあるかわからないため、そのような文字を見つける度にブラックリストに追加する必要があるかと思います。

ここは逆の発想で、ホワイトリストを作成し、ホワイトリストの文字だけで構成されているかどうかで判定してみてはどうでしょう?
指定の文字だけで構成されているかを判断するのは正規表現を使うのが一般的と思います。
例えば半角英数のみをホワイトリストとして指定する場合、このサイトが参考になるかと思います。(Vue.jsではないですが、正規表現の考えは同じかと)
https://javascript.programmer-reference.com/js-check-hankaku-eisu/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/11/14 16:01

    私もホワイトリスト方式のほうが適当かと思います(仕様が明示されればそれももっと声を大にして言えるのですが・・・)

    キャンセル

  • 2018/11/14 17:02

    ありがとうございます。
    mts10806さんに教えて頂くまでこんなに知らない文字が存在しているとは思わず「赤くしたい文字を登録するほうが早いはず!」と思っていました。
    試したことに記載した通り半角英数以外は赤くするというのは一度やっていたのですが、馬鹿正直にA~Zまで全部文字を書いてました。正規表現は範囲で指定できるんですね。
    日本語のことを考えると頭が痛くなりそうなので、半角英数と全角英数と一般的な記号だけ登録して試してみようと思います。
    ありがとうございました!

    キャンセル

  • 2018/11/14 17:31

    >mts10806さん
    仕様が不明でしたが、おそらくこれで解決しそうという不明確な理由で回答してしまいました(^^;

    >SystemAjisai
    正規表現、パターンチェック等でかなり使いますので覚えておいて下さい。わかりやすく説明していくれているサイトがいくつもありますので、ググってみて下さい。パターンのサンプルはいっぱいありますが、できれば理解してからコピペしてくださいね。

    キャンセル

  • 2018/11/14 17:53

    まさに質問前にコピペして試してみて、よくわからずコメントアウトした中に半角英数記号を範囲で指定しているものがありました…。ちゃんと勉強してきます。
    日本語入力がある部署からもOKがもらえたので、直せ次第教えて頂いたホワイトリスト方式でリリースすることになりました。
    色々アドバイス頂き本当にありがとうございました。

    キャンセル

+3

正直全部カバーするのは無理じゃないですかね。
特に機種依存文字の類ですから。
キーボードに直接なくても変換候補にはでてきます。
フォントによっても違ったりして、全て網羅は困難を極めるでしょう。
例えばこんな表がありますが、全てをブラックリストに入れてチェックするというと現実的ではないですよね。

どのようなWebシステムかは存じ上げませんが、
打たれた情報が正しい情報かどうかを判断する術はありません。
※「数字なのに英字が打たれた」とか「”カナ”なのに”かな”が打たれた」とかは除く
名前の漢字とか、それが本当にその人の名前なのかどうか確かめる術はないですよね。
例えば比較的自由に入力が可能な住所であってもマンション名まで行くと機種依存文字やら’やら入ってくることが多々あります。
国によっては必要な文字かもしれません。でもそれはその入力するユーザーによりけりです。
制限しすぎるのはかえって使い勝手が悪くなります。
それはもうそのまま受け入れるしかありません。

という前提ですが、
実際に何か問題が起きているのでしょうか?

「困っています」とありますが、何がどう困っているのかわかりませんし、
大きな問題が起きているのか、そのあたりが質問文からは読み取れませんでした。

もう少し背景や経緯・起きている問題を具体的に書かれたほうが良いと思います。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/11/14 16:52

    ご指摘ありがとうございます。困っていることの詳細を追記しました。

    あの謎の文字たちは機種依存文字という名前なんですね。
    用語がわからなくてどう調べて良いのか悩んでいたのでスッキリしました。
    仰る通り驚くほど多かったです…世の中にはこんなに文字があるんですね…。
    別の方の回答にコメントしてくださった通りホワイトリストというので検討してみようと思います。
    ありがとうございました。

    キャンセル

  • 2018/11/14 16:59

    一応「人にとっては必要な文字の可能性がある」という部分は考慮してくださいね。
    パッと見文字化けでよく見る文字であっても存在する字である以上はどこかで実用される可能性があるものですし。

    キャンセル

  • 2018/11/14 17:06

    ありがとうございます。
    入力チェックでエラーにして登録できないようにするのではなくて、あくまでも強調表示だけして最終的な判断は入力者に任せることにします。

    キャンセル

+2

こういったWebシステムの場合、入力時のバリデーションも一つの方法ですが、逆に文字を受け入れて変換してしまう方法もあります。
JavaScriptにもnormalizeがありますので、NKFDやNKFCで変換して処理する方法も検討した方がいいと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/11/21 08:34

    回答ありがとうございます。参考になります。
    私のケースでは正しい文字種がシステム側で不明なので受け入れて変換することはできないのですが、この方法を使えば候補がだせそうです。
    これで毎日数十回来るようになった「直し方がわからない」という問合せから解放されます・・・。
    ありがとうございました。

    キャンセル

0

そういう「マスターがある」ものでしたら、相手方からマスターデータをもらってきて、フリー入力欄は底に対する検索という形にすることで解決させてはどうでしょうか。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/11/14 16:22

    > 通常はこういった文字の入力ミスをどうやてユーザーに伝えるのでしょうか?

    コードなどで規格化する、プルダウンなどで選ばせることで、「全角文字をコードとして入力させること自体をしない」というのが正解かと思います。

    キャンセル

  • 2018/11/14 16:53

    私自身がこの業務に精通しておらず、説明が下手ですみません。。。
    例えば「小麦粉」という製品があるとして、それには品番のようなコードがありマスタがあると思うのですが、この項目はその「小麦粉」がいつ、どこで、どの機械で作られてどの箱にはいってウチに届いたものかというような「個体」を特定するためのものです。
    純粋に「●年●月●日●●で製造分」と日本語で入っていることもありますし、暗号のような文字の羅列の場合もあります。
    基本的に重複が許されないような使い捨てのものなので、どこの顧客もマスタ化はされてないと思います。
    うちの会社のロット番号とは感覚が違うので曖昧な言い方をしましたが、世間ではこれをロット番号と呼ぶそうです。
    無知ですみません…。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.58%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る