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

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

ただいまの
回答率

89.07%

入力フォーム 全角→半角 自動変換

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 2,867

kitten

score 25

前提・実現したいこと

入力フォームを外れた際に、自動で全角文字を半角文字に変換されるようにしたい。
尚且つ、同時に小文字を大文字に変換するようにもしたい。
例:bc12345⇒BC12345

また、可能であれば"cん12345"の様に平仮名が混ざってしまった場合でも
キーボードのF10の様にCN12345と変換してくれる様にしたい。

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

こちらのサイトのソースを
そのまま使わせて貰い、以下のような簡単なフォームを作成し実行してみたのですが
変換されず困っています。

<!DOCTYPE HTML>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>変換テスト</title>
    </head>
    <body>
        <form>
            <input type="text" name="text" maxlength="20" onblur="toHalfWidth(this)" />
        </form>
        <script>
            function toHalfWidth(elm) {
                return elm.value.replace(/[A-Za-z0-9!-~]/g, function(s){
                return String.fromCharCode(s.charCodeAt(0)-0xFEE0);
            });
}
        </script>
    </body>
</html>

あまりにも初心者なため意味の分からないことをしているかも知れませんが
教えていただけるとありがたいです。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 3

checkベストアンサー

+4

"cん12345"→”CN12345”の実現是非はともかく、
このコードでは文字列を取得したものを変換をしているだけでどこにもセットしていないから何も起きていません。
returnしてもinputのvalueに返すわけではないですからね。
下記のようにvalueにセットしてやる必要があります。

function toHalfWidth(elm) {
    elm.value = elm.value.replace(/[A-Za-z0-9!-~]/g, function(s){
        return String.fromCharCode(s.charCodeAt(0)-0xFEE0);
    });
}

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/02/27 16:39

    a→Aのようなことですよね。そういう関数があります。
    https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase

    キャンセル

  • 2019/02/27 17:32

    ありがとうございます。
    こちらの関数は上記のコードと組み合わせて使うことは
    できるのでしょうか?

    キャンセル

  • 2019/02/27 17:35

    リファレンス読まれました?文字列に対して行えばいいので、ご自由に。
    まずはやってみてください。

    キャンセル

+1

「ん」とかは煩雑になるのでやめたほうがいい

var str="Abc12345";
str=str.replace(/[A-Za-z0-9]/g, function(s) {
    return String.fromCharCode(s.charCodeAt(0) - 65248);
}).replace(/[a-z]/g, function(s) {
    return String.fromCharCode(s.charCodeAt(0) -32);
});


※一部調整

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/02/27 15:21

    ご回答ありがとうございます。
    今回、mts10806様の回答で解決しましたが
    こちらも参考にさせていただきます。
    ありがとうございました。
    またよろしくお願いいたします。

    キャンセル

+1

求められている回答とは違うのですが。

求めている文字だけ入力可能にしてしまえば、変換しなくても済むと思います。

<!-- Learn about this code on MDN: https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input/text -->

<style>
div {
  margin-bottom: 10px;
  position: relative;
}

p {
  font-size: 80%;
  color: #999;
}

input + span {
  padding-right: 30px;
}

input:invalid+span:after {
  position: absolute;
  content: '✖';
  padding-left: 5px;
}

input:valid+span:after {
  position: absolute;
  content: '✓';
  padding-left: 5px;
}
</style>
<form>
  <div>
    <label for="uname">Choose a username: </label>
    <input type="text" id="uname" name="name" required size="45"
           pattern="[A-Z0-9]*">
    <span class="validity"></span>
    <p>大文字アルファベットか数字だけ</p>
  </div>
  <div>
    <button>Submit!</button>
  </div>
</form>

<script >
  const editorElem = document.getElementById('uname');
  console.log(editorElem);
  editorElem.addEventListener('compositionupdate', function (event) {
    alert(`全角で登録したらあかんて`);
  });
  console.log('end');
</script>

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/02/27 15:16

    ありがとうございます。
    大変勉強になりました。
    このようなやり方もあるのですね。

    今回、社内の現場で作業されている方に向けてのもので
    パソコン操作等に慣れていない方が使われるので
    なるべくユーザーが何もしなくても良いようなものがしたかったので
    mts10806さんの回答を採用させていただきました。

    また何か行き詰った際にお力添え頂ければと思います。
    ありがとうございました。

    キャンセル

  • 2019/02/27 16:12

    全角入力しようとしたら警告を出すコードも追加しときました。

    > パソコン操作等に慣れていない方が使われるので
    私なら入力間違いがそもそも無いように持っていきます。
    - teratailの趣旨とは外れますが、バーコードスキャナーとか併用とか
    - 選択肢が少ないなら、選択してもらう

    社内の事情は分かりませんが、以下を気をつけてください。
    ---
    mts10806さんのやり方を試してから考えて欲しいですが、
    > "cん12345"→”CN12345”の実現是非はともかく、
    ’ん’は何も変換しません。正確には、アルファベットと数字だけ半角にして居るだけです。大文字にするとかはしてないですよ。

    const input = "あア亜1Aぁァa";
    const convert = input.replace(/[A-Za-z0-9!-~]/g, function (s) {
    console.log(`${s} > ${String.fromCharCode(s.charCodeAt(0) - 0xFEE0)}`);
    return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);
    })
    console.log( input); // あア亜1Aぁァa
    console.log(convert); // あア亜1Aぁァa

    キャンセル

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

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

関連した質問

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