実現したいこと

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

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

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

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

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

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

※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も考えたのですが、正規表現の指定が
全角スペースだけできなかったです。

補足

特になし

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 で対応しました。（根本が修正されていない問題はありますが…）何度も、ご回答申し訳ありません。そして、本当にありがとうございました！

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

回答1件

ベストアンサー

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

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

総合スコア114878

SRFJ

2024/04/18 06:24

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