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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

5回答

27558閲覧

入力文字制限

coko1

総合スコア276

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1グッド

0クリップ

投稿2016/12/02 01:33

編集2016/12/02 02:12

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

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

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

Hiraga.maSato👍を押しています

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答5

0

ベストアンサー

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

coko1

2016/12/02 05:13

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

0

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

Countable.js

(jQueryがOKならこんなのも)
jquery.text-counter.js

ご参考まで

投稿2016/12/02 02:36

takito

総合スコア3111

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

coko1

2016/12/02 03:12

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

0

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バイト文字、4バイト文字の考慮は必要ないのかなと思ったので
guest

0

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

投稿2016/12/02 01:35

himakuma

総合スコア952

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

coko1

2016/12/02 01:48 編集

すみません。maxlengthで問題ないです。制限を持たせる方法としてはやはりmaxlengthが一番でしょうか?質問の内容通り全角での入力ができそうに見えるのが気になりまして。
himakuma

2016/12/02 02:04

それはJavaScriptでやっても同じだと思いますが?全角の場合、漢字の変換が完了するまで文字数が確定しないので、完了後に超過分を削除って感じになると思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問