入力文字制限

お世話になります。
入力フォームでの入力文字数に制限を持たせたいのですが、どのように実装したらよいでしょうか？

入力制限をする理由としてまず入力情報をDBに登録するために必要なもので、そのカラムに文字数制限を設けているので考慮する必要があります。maxlength=30で設定して今はやっているのですが、半角30文字でのデータ登録は行えるのですが、全角だと15文字までしか登録できません（フォームへの入力は30文字可能）
そのため全角30文字入力して登録を試みても当然エラーになります。

全角15文字、半角30文字以上になったら入力を反映させないようにしたいのす。ご協力お願い致します。

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

回答5件

ベストアンサー

javascriptでの文字数の制限はこのように行うことができます。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>文字数チェック</title>
6    <script>
7        function check() {
8            var getText = document.form.text1.value;
9            if (getText.length >= 15) {
10                alert("文字数が制限をこえています");
11            } else {
12                alert("okです");
13            }
14        }
15    </script>
16</head>
17
18<body>
19<form name="form">
20    <input name="text1" id="text1" type="text">
21    <button onClick='check()'>クリック</button>
22</form>
23</body>
24</html>

ですが、一部のユーザーはjavascriptを無効にしている場合がありまして、そのようなユーザーも扱う必要があるときは、この文字数制限だけでは不十分です。また、maxlength属性は自動で文字数が削られるのでユーザーに優しくないと思いますので、使わないほうがいいのではないかと思います。
そんなわけで、サーバー側でも送られてきた値をチェックしてあげないといけません。
今回はPHPでの文字数のチェックの仕方を書いておきます。PHPでの文字数チェックはmb_strlenを使うことで楽に行えます。

PHP
1function check($str,$max){
2    if(!is_string($str)){
3        return false;
4    }
5    $len = mb_strlen($str);
6    return ($len >= $max);
7}
8
9$ch = "文字列文字列";
10if(check($ch,15)){
11    echo("aaa");
12}else{
13    echo("bbb");
14}

もし、いろいろあって設定していたサイズ以上のデータがデータベースに格納されるような要求が送られた場合、そのデータは格納されず、エラーが発生したり、値が長すぎる場合、エラーを出さずに文字が切り捨てられたりするのが一般的ではないかと。

投稿2016/12/02 05:12

編集2016/12/02 07:13

退会済みユーザー

総合スコア0

バイト数で制限するならこんな感じです

HTML
1<script>
2$(function(){
3  $('input.test').on('input',function(){
4    var maxbytes=30;
5    var mybytes=new Blob([$(this).val()]).size;
6    if(mybytes<=maxbytes){
7      $(this).data('val',$(this).val());
8    }else{
9      $(this).val($(this).data('val')||'');
10      mybytes=new Blob([$(this).val()]).size;
11    }
12    $('span.test').text(mybytes+'バイト');
13  });
14});
15</script>
16
1730バイト制限：<input type="text" class="test"><span class="test">0バイト</span>
18

投稿2016/12/02 03:49

yambejp

総合スコア117682

coko1

2016/12/02 05:13

全角はある程度2バイトで認識されているのですが、上記の方法でチェックすると全角一文字が3バイトとして扱われていたのでだめでした、、、

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

もしライブラリを利用してよいなら、入力文字数のカウント値を得て対応する方法も

Countable.js

（jQueryがOKならこんなのも）
jquery.text-counter.js

ご参考まで

投稿2016/12/02 02:36

takito

総合スコア3116

coko1

2016/12/02 03:12

上記に提示してくださったライブラリは3バイト文字、4バイト文字の考慮はなされていたりするのでしょうか？

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

HTMLのmaxlengthで、一次的な入力文字数制限を設けることは可能です。

HTML
1<input type="text" maxlength="10" id="name">

さらにJavaScriptで文字数のチェックをする事も可能です。

JavaScript
1$('form').submit(function() {
2    if($(this).val().length > 10) {
3        return false;
4    }
5}

ただし、セキュリティ的な事を考えるのであれば、最終的にはサーバ側でPHPやJava等を使ってチェックするのが望ましいかと思います。
理由としては、POSTのHTTP通信を手動で発行する事も可能で、WEBページを介さずにツール等からPOSTしようとしてくる事も可能だからです。
まぁ文字数あふれたからどうだというところはありますが、文字種チェック等色々やるのであれば、クライアント側とサーバ側両方で入力チェックを行うのが望ましいかと思います。

投稿2016/12/02 01:50

kunai

総合スコア5405

coko1

2016/12/02 02:07 編集

入力制限をする理由としてまず入力情報をDBに登録するために必要なもので、そのカラムに文字数制限を設けているので考慮する必要があります。maxlength=30で設定して今はやっているのですが、半角30文字でのデータ登録は行えるのですが、全角だと15文字までしか登録できません（フォームへの入力は30文字可能）そのため全角30文字入力して登録を試みてもエラーになります。どうにかならないでしょうか？

kunai

2016/12/02 02:18

文字数ではなくバイト数の問題と言う事ですね。バイト数を計算するような関数はJavaScriptでもいろんな方が作ってらっしゃいますので、参考にされるといいかもしれません。 http://logicalerror.seesaa.net/article/140124533.html ↑全角が2バイトということで、ShiftJISかなと思いましたのでSJIS用の参考ページ inputタグのmaxlengthはそのまま30にしておいて、フォームの送信前にJavaScriptでバイト数を計算→DBのカラムに設定されたバイト数を超えていたら警告を出す、と言う感じですかね

coko1

2016/12/02 02:57

可能性は低いと思うのですが、仮にバイト以上の文字が入力された場合どうなるのでしょうか？

kunai

2016/12/02 03:02

正規にWEBサイトを通じて行う場合はJavaScriptでチェックが入るため、エラーとなりますね。独自にPOSTを発行した場合はJavaScriptのチェックを通らないため、サーバ側のPHPなりJavaなりでのチェックを通る事になります。仮にサーバ側のチェックに不具合があったりしてサーバ側のチェックも通りぬけてしまった場合、DBへのINSERT時にDBがエラーを吐きます。(INSERTに失敗します) 仮にこのデータが超巨大なデータでサーバ機能を停止させるレベルの攻撃だった場合、まずはPHP等サーバ側プログラムの最大POSTデータ制限が走りますので、ココを適切に設定していれば問題はありません。(WEBアプリケーションサーバがエラーを吐きます) こんなところでしょうか。

coko1

2016/12/02 03:09

すみません脱字をしてしまい意味合いが変わってしまいました．．．仮に3バイト以上の文字が入力された場合どうなるのでしょうか？が正しい質問です。 3バイト文字、４バイト文字の考慮は必要ないのかなと思ったので

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

「maxlength」ではなく、JavaScriptで対応したいということですか？

投稿2016/12/02 01:35