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

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

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

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

340閲覧

HTMLで、inputエリアに入力された全角スペースに警告を出したい

SRFJ

総合スコア2

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2024/04/17 07:11

実現したいこと

formタグ input(text エリア)に入力された全角スペースに警告を出したいです。

発生している問題・分からないこと

PHPを使い、検索ボックスへ入力されたキーワードを
DBより検索し、search.php にて、該当するものを表示させるツールを作成しております。

input(検索ボックス)へ入力されたキーワードの中に、全角スペースがある場合
警告を出して、検索できないようにしたいです。

全角スペースを半角スペースに置き換えれれば、1番良いのですが
javascript を使用した置き換えは、なぜかうまくいかなく…

それなら、HTML側で検索できないようにしようと考えました。
ご教授いただければ幸いです。
よろしくおねがいします。

※PHP(search.php)側で受け取ってからの、str_replaceの置き換えは、考えておりません。

PHP 8.2
HTML 5

該当のソースコード

HTML

1<form method="GET" action="search.php"> 2<input type="text" name="search" class="input_text" required="required" value=''"> 3<button type="submit" class="s_button"></button> 4</form>

試したこと・調べたこと

  • teratailやGoogle等で検索した
  • ソースコードを自分なりに変更した
  • 知人に聞いた
  • その他
上記の詳細・結果

HTMLの属性を使って入力チェックする方法で、
patternも考えたのですが、正規表現の指定が
全角スペースだけできなかったです。

補足

特になし

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

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

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

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

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

int32_t

2024/04/17 07:30

JavaScript で半角スペースへの置き換えは可能ですし、pattern 属性でのチェックも可能です。うまくいかなかったコードを開示していただければ助言しやすいです。
tezcello

2024/04/17 15:03

> 全角スペースがある場合警告を出して、検索できないようにしたい 検索語句を入力する際に、意図せず全角スペースになってしまう事は良くあります。 拒否されるよりも、拡大解釈(全角スペースも同一視)してくれる方が利用者にとっては優しいです。 > PHP(search.php)側で受け取ってからの、str_replaceの置き換えは、考えておりません なぜ? 上手くいかないヤツに固執せず、上手くいく事が判っている方法を使うのが合理的では?
SRFJ

2024/04/18 06:03

回答ありがとうございます。 Javascriptは、実装後エラーが出て消してしまい残ってないので… pattern 属性 でのチェックについて、詳しく教えていただけないでしょうか…? input タグに pattern="[^\u3000]" を入れて確認したのですが、スペースがあってもなくても [入力された値がフィールドに指定された書式と異なります。]とエラーがでます。 受け取り先(search.php) で確認すると、文字列の最後に半角スペースが入っているのが 原因なのかなと思っております・・・。
SRFJ

2024/04/18 06:10

tezcello 様 回答ありがとうございます。 拡大解釈(全角スペースも同一視)も考えたのですが、 受け取り先のプログラム改修にかなり工数がかかるので リソースと相談した結果、突貫工事ですが、入力の制限を考えてます。 ご提案ありがとうございます。 補足になるのですが、キーワード検索条件に、ページURLを生成しています。 受け取り先で、str_replaceの置き換えを試すと、半角スペースに変更はできたのですが submit された キーワード で検索になるため、事前に置き換えておく必要があると 考えていたのですが、何か良い方法があるのでしょうか…? ご教授いただければ幸いです。
int32_t

2024/04/18 06:26

> input タグに pattern="[^\u3000]" を入れて確認したのですが、 pattern="[^\u3000]+" ですね。 なんにしても、yambejp さんの回答のJavaScriptコードのように半角スペースに置き換えるほうがよいかと思います。
tezcello

2024/04/18 09:38

> キーワード検索条件に、ページURLを生成 良く解りません。 予め特定のキーワードを検索するURLを用意しているという意味でしょうか? 特別やる事は変わらないと思うのですが... > 受け取り先で、str_replaceの置き換えを試すと、半角スペースに変更はできたのですが 期待している動作(全角->半角の変換)が出来たのに、何がダメなんでしょうか? > submit された キーワード で検索になる 普通の動作なのでは?
SRFJ

2024/04/19 00:54

お二方、ご回答ありがとうございました! いただいたアドバイス、とても参考になりました。
tezcello

2024/04/19 01:44

> 受け取り先のプログラム改修にかなり工数がかかる 何か特殊な事をされているのですね。 バリデーションの一環なので、改修範囲は局所的なのが普通と思っていたのですが。 > submit された キーワード で検索 > 何か良い方法 ・キーワード取得時に全角スペースを半角スペースに変換する ・取得したキーワードを分割する際に preg_split() で、半角全角両方のスペースで分割 __ SQLを構築する際にキーワードを分割して...ですよね? どちらもさほどの手間にはならないと思うのです。 でも、質問者さんにはもう終わった事なのでしょうね。 失礼しました。
SRFJ

2024/04/19 02:16

tezcello 様 回答ありがとうございます! 下流がバイパス工事だらけで、複雑になりすぎて 担当者も退社してしまったので、工数をかけたくなかったというのもあります…涙 なので、今回は、Javascript で 対応しました。 (根本が修正されていない問題はありますが…) 何度も、ご回答申し訳ありません。 そして、本当にありがとうございました!
guest

回答1

0

ベストアンサー

全角スペースが含まれていたらダメということでしょうか?

HTML

1<input type="text" name="search" class="input_text" pattern="[^\u3000]" required="required" value="">

変換も特に問題ないような気がしますが・・・

javascript

1<script> 2document.addEventListener('submit',(e)=>{ 3 const search=e.target.querySelector('[name=search]'); 4 const reg=/\u3000/; 5 if(reg.test(search.value)){ 6 alert('全角スペースを半角に変更しました') 7 e.preventDefault(); 8 search.value=search.value.replace(reg,' '); 9 } 10}); 11</script> 12<form method="GET"> 13<input type="text" name="search" class="input_text" required="required" value=""> 14<button type="submit" class="s_button">send</button> 15</form>

追記

全角スペースを半角にスペースに変更して送信

javascript

1document.addEventListener('submit',(e)=>{ 2 const search=e.target.querySelector('[name=search]'); 3 const reg=/\u3000/g; 4 if(reg.test(search.value)){ 5 search.value=search.value.replace(reg,' '); 6 } 7});

もしくは入力させない

javascript

1document.addEventListener('input',(e)=>{ 2 const reg=/\u3000/g; 3 if(e.target.matches('[name=search]') && reg.test(e.target.value)){ 4 e.target.value=e.target.value.replace(reg,' '); 5 } 6});

投稿2024/04/17 07:34

編集2024/04/18 06:39
yambejp

総合スコア115249

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

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

SRFJ

2024/04/18 06:24

yambejp 様 回答ありがとうございます! 先の回答者の方にも同様の返答をさせていただいているのですが… input タグに pattern="[^\u3000]" を入れて確認したのですが、スペースがあってもなくても [入力された値がフィールドに指定された書式と異なります。]とエラーがでます。 いただいた、javascript を試させていただきました! 警告できました!こちらが書いたコードと全然違ったので・・・汗 ぜひ、こちらを使わせていただきたいです! ちなみに、警告を出さずに この置き換えたキーワードで 検索させることはできるのでしょうか…? 置き換えたキーワードで submit ボタンをもう1度押すイメージです。 ご教授いただければ幸いです。 よろしくお願いいたします!
yambejp

2024/04/18 06:41

警告をだすのではなく強制なのですね? 追記しておきました ただjsはあくまで入力サポートでしかありませんので 最終的には受け取り側でもバリデートが必要になりますのでご留意ください
SRFJ

2024/04/18 07:38

yambejp 様 追記ありがとうございます! どうにか形にできそうです!非常に助かりました…。 いただいたコードをよく理解して組み込んでみます。 受け取り側も、問題なく動作しそうです! ありがとうございました!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.44%

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

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

質問する

関連した質問