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

前提・実現したいこと

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

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

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

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

HTML
1<!DOCTYPE HTML>
2<html lang="ja">
3	<head>
4		<meta charset="UTF-8">
5		<title>変換テスト</title>
6	</head>
7	<body>
8		<form>
9			<input type="text" name="text" maxlength="20" onblur="toHalfWidth(this)" />
10		</form>
11		<script>
12			function toHalfWidth(elm) {
13    			return elm.value.replace(/[Ａ-Ｚａ-ｚ０-９！-～]/g, function(s){
14        		return String.fromCharCode(s.charCodeAt(0)-0xFEE0);
15    		});
16}
17		</script>
18	</body>
19</html>

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

行動規範の内容に同意します

回答3件

ベストアンサー

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

js
1function toHalfWidth(elm) {
2    elm.value = elm.value.replace(/[Ａ-Ｚａ-ｚ０-９！-～]/g, function(s){
3        return String.fromCharCode(s.charCodeAt(0)-0xFEE0);
4    });
5}

投稿2019/02/27 02:53

m.ts10806

総合スコア80890

kitten

2019/02/27 05:47

ありがとうございます。こちらの方法でうまく変換されました。

m.ts10806

2019/02/27 05:48

解決されたようで何よりです。

kitten

2019/02/27 06:12

因みにお聞きしますが、小文字を大文字に変換する場合も同様に-0xFEE0のように文字コードを引くことで変換することができるのでしょうか？

m.ts10806

2019/02/27 07:39

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

kitten

2019/02/27 08:32

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

m.ts10806

2019/02/27 08:35

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

行動規範の内容に同意します

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

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

HTML
1<!-- Learn about this code on MDN: https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input/text -->
2
3<style>
4div {
5  margin-bottom: 10px;
6  position: relative;
7}
8
9p {
10  font-size: 80%;
11  color: #999;
12}
13
14input + span {
15  padding-right: 30px;
16}
17
18input:invalid+span:after {
19  position: absolute;
20  content: '✖';
21  padding-left: 5px;
22}
23
24input:valid+span:after {
25  position: absolute;
26  content: '✓';
27  padding-left: 5px;
28}
29</style>
30<form>
31  <div>
32    <label for="uname">Choose a username: </label>
33    <input type="text" id="uname" name="name" required size="45"
34           pattern="[A-Z0-9]*">
35    <span class="validity"></span>
36    <p>大文字アルファベットか数字だけ</p>
37  </div>
38  <div>
39    <button>Submit!</button>
40  </div>
41</form>
42
43<script >
44  const editorElem = document.getElementById('uname');
45  console.log(editorElem);
46  editorElem.addEventListener('compositionupdate', function (event) {
47    alert(`全角で登録したらあかんて`);
48  });
49  console.log('end');
50</script>

投稿2019/02/27 05:16

編集2019/02/27 06:31

oikashinoa

総合スコア2826

kitten

2019/02/27 06:16

ありがとうございます。大変勉強になりました。このようなやり方もあるのですね。今回、社内の現場で作業されている方に向けてのものでパソコン操作等に慣れていない方が使われるのでなるべくユーザーが何もしなくても良いようなものがしたかったので mts10806さんの回答を採用させていただきました。また何か行き詰った際にお力添え頂ければと思います。ありがとうございました。

oikashinoa

2019/02/27 07:12

全角入力しようとしたら警告を出すコードも追加しときました。 > パソコン操作等に慣れていない方が使われるので私なら入力間違いがそもそも無いように持っていきます。 - teratailの趣旨とは外れますが、バーコードスキャナーとか併用とか - 選択肢が少ないなら、選択してもらう社内の事情は分かりませんが、以下を気をつけてください。 --- mts10806さんのやり方を試してから考えて欲しいですが、 > "ｃん１２３４５"→”CN12345”の実現是非はともかく、 ’ん’は何も変換しません。正確には、アルファベットと数字だけ半角にして居るだけです。大文字にするとかはしてないですよ。 const input = "あア亜１Ａぁァa"; const convert = input.replace(/[Ａ-Ｚａ-ｚ０-９！-～]/g, function (s) { console.log(`${s} > ${String.fromCharCode(s.charCodeAt(0) - 0xFEE0)}`); return String.fromCharCode(s.charCodeAt(0) - 0xFEE0); }) console.log( input); // あア亜１Ａぁァa console.log(convert); // あア亜1Aぁァa

行動規範の内容に同意します

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

javascript
1var str="Ａｂｃ１２３４５";
2str=str.replace(/[Ａ-Ｚａ-ｚ０-９]/g, function(s) {
3    return String.fromCharCode(s.charCodeAt(0) - 65248);
4}).replace(/[a-z]/g, function(s) {
5    return String.fromCharCode(s.charCodeAt(0) -32);
6});