[jQuery]フォームに全角英数字で入力された値を半角英数字に変換する方法

jQuery

2019.02.12

Webフォームでユーザーが全角英数字を入力した際、自動的に半角英数字に変換することでデータの整合性や一貫性を保つことができます。

この変換は、特に日本語環境での入力時に有効で、ユーザー体験を向上させることができます。

この記事では、フォームに入力された全角英数字を半角英数字に変換する方法とサンプルフォームを紹介します。

jQuery
HTML
デモ

jQuery

<script src="jquery.min.js"></script>
<script> 
$(function() {
	$('.character').change(function(){
		var text  = $(this).val();
		var change = text.replace(/[Ａ-Ｚａ-ｚ０-９]/g,function(s){
			return String.fromCharCode(s.charCodeAt(0)-0xFEE0);
		});
	$(this).val(change);
	});
});
</script>

$(function() {

$('.character').change(function(){

var text = $(this).val();

var change = text.replace(/[Ａ-Ｚａ-ｚ０-９]/g,function(s){

return String.fromCharCode(s.charCodeAt(0)-0xFEE0);

});

$(this).val(change);

});

</script>

HTML

<input type="text" value="" class="form-control character">

1	<input type="text" value="" class="form-control character">

デモ

全角英数字を入力すると半角英数字に変換します。