Q&A
PHPは本件とはどう関係するのでしょう。
現在、商品受注を目的としたプログラムをSmartyフレームワークを使用したphpで作成しています。
その中の呼び出し先テンプレートのHTMLで、jsを呼び出して使用する形を計画しています。
また、HTML5のpatternがsafariで機能しないため、そちらの使用は考えておりません。
数量を入力する欄で、「+」「-」「.」「e」などの数字記号・スペースを含め、
全ての全角英字記号・半角英字記号の入力をさせず、動的に除去する動きをさせたいのです。
使用しているソースですと、全角数字を半角へ変換する動きは出来るのですが、以下の2パターンの除去に対応出来ません。
①1文字目は半角数字・2文字目が除去対象
②1文字目は除去対象・2文字目は半角数字
jsはほとんど触ったことがなく、色々なサイト様の見様見真似とツギハギになってしまっています。
すみませんが、ご助力いただけますと幸いです。
js
1//sample2.js テスト 2// 変換前 3var afterStr2 = new Array('0','1','2','3','4','5','6','7','8','9'); 4// 変換後 5var beforeStr2 = new Array('０','１','２','３','４','５','６','７','８','９'); 6 7function convertStr2(str2) { 8 var Element2 = str2; 9 var fullStr2 = str2; 10 for(var i = 0; i < beforeStr2.length; i++) { 11 fullStr2 = fullStr2.replace(new RegExp(beforeStr2[i], 'g'), afterStr2[i]); 12 } 13 14 if(fullStr2.match(/[0-9]+/) ){ 15 fullStr2 = ("00" + fullStr2).slice( -2 ) ; 16 }else{ 17 if(Element2 == fullStr2){ 18 fullStr2 = ''; 19 } 20 } 21 22 return fullStr2; 23} 24 25$(function() { 26 $('.number2').on('blur', function() { 27 var str = $(this).val(); 28 $(this).val(convertStr2(str)); 29 }); 30 31}); 32
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5<meta name = "format-detection" content = "telephone=no"> 6<link rel="stylesheet" href="./common/css/jquery.mobile-1.1.0.min.css" /> 7<link rel="stylesheet" href="./common/css/style.css"> 8<link rel="stylesheet" href="./common/css/button.css"> 9 10<script src="http://code.jquery.com/jquery.min.js"></script> 11<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 12<script language="JavaScript" charset="utf-8" type="text/javascript" src="./common/js/sample2.js"></script> 13 14{literal} 15{/literal} 16 17</head> 18<body class="ui-mobile-viewport"> 19<form method="post" action="order_02.php"> 20<div> 21 <table class ="center-position" border="1"> 22 <tr style=color:"#ffffff" bgcolor="#000000" height=30px> 23 <th class ="menu" width=220>商品名</th> 24 <th class ="menu" width=100>単価（円）</th> 25 <th class ="menu" width=50>数量</th> 26 </tr> 27 28 {section name=dbList loop=$result} 29 <tr style= "height=30px;"> 30 <td class="display-center">{$result[dbList].NAME}</td> 31 <td class="display-center">{$result[dbList].KINGAKU}</td> 32 <td class="display-center"> 33 <input class="number2" type="number" min="1" max="99" maxlength="2" name="suryo[]" autocomplete="off"> 34 </td> 35 </tr> 36 {/section} 37 </table> 38 <br> 39 <div class="buttonMenu"> 40 <button type="submit" name="" value="" class="moveButton">確認 »</button> 41 </div> 42</form> 43</body> 44</html>
ブラウザからのHTML
HTML
1 2<!DOCTYPE html> 3<html lang="ja"> 4<head> 5<meta charset="UTF-8"> 6<meta name = "format-detection" content = "telephone=no"> 7<link rel="stylesheet" href="./common/css/jquery.mobile-1.1.0.min.css" /> 8<link rel="stylesheet" href="./common/css/style.css"> 9<link rel="stylesheet" href="./common/css/button.css"> 10 11<script src="http://code.jquery.com/jquery.min.js"></script> 12<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 13<script language="JavaScript" charset="utf-8" type="text/javascript" src="./common/js/sample2.js"></script> 14 15 16 17 18</head> 19 <body class="ui-mobile-viewport"> 20 <form method="post" action="order_02.php"> 21 <div> 22 <table class ="center-position" border="1"> 23 <!-- 見出し項目表示箇所 Start --> 24 <tr style=color:"#ffffff" bgcolor="#000000" height=30px> 25 <th class ="menu" width=220>商品名</th> 26 <th class ="menu" width=100>単価（円）</th> 27 <th class ="menu" width=50>数量</th> 28 </tr> 29 <!-- 見出し項目表示箇所 End --> 30 31 <!-- 検索データ表示箇所 Start --> 32 <tr style= "height=30px;"> 33 <td class="display-center">テスト１</td> 34 <td class="display-center">5,000</td> 35 <td class="display-center"> 36 <input class="number2" type="number" min="1" max="99" maxlength="2" name="suryo[]" autocomplete="off"> 37 </td> 38 </tr> 39 <tr style= "height=30px;"> 40 <td class="display-center">テスト２</td> 41 <td class="display-center">5,000</td> 42 <td class="display-center"> 43 <input class="number2" type="number" min="1" max="99" maxlength="2" name="suryo[]" autocomplete="off"> 44 </td> 45 </tr> 46 <tr style= "height=30px;"> 47 <td class="display-center">テスト３</td> 48 <td class="display-center">5,000</td> 49 <td class="display-center"> 50 <input class="number2" type="number" min="1" max="99" maxlength="2" name="suryo[]" autocomplete="off"> 51 </td> 52 </tr> 53 <tr style= "height=30px;"> 54 <td class="display-center">テスト４</td> 55 <td class="display-center">5,000</td> 56 <td class="display-center"> 57 <input class="number2" type="number" min="1" max="99" maxlength="2" name="suryo[]" autocomplete="off"> 58 </td> 59 </tr> 60 <tr style= "height=30px;"> 61 <td class="display-center">テスト５</td> 62 <td class="display-center">5,000</td> 63 <td class="display-center"> 64 <input class="number2" type="number" min="1" max="99" maxlength="2" name="suryo[]" autocomplete="off"> 65 </td> 66 </tr> 67 <tr style= "height=30px;"> 68 <td class="display-center">テスト６</td> 69 <td class="display-center">5,000</td> 70 <td class="display-center"> 71 <input class="number2" type="number" min="1" max="99" maxlength="2" name="suryo[]" autocomplete="off"> 72 </td> 73 </tr> 74 <tr style= "height=30px;"> 75 <td class="display-center">テスト７</td> 76 <td class="display-center">5,000</td> 77 <td class="display-center"> 78 <input class="number2" type="number" min="1" max="99" maxlength="2" name="suryo[]" autocomplete="off"> 79 </td> 80 </tr> 81 <tr style= "height=30px;"> 82 <td class="display-center">テスト８</td> 83 <td class="display-center">5,000</td> 84 <td class="display-center"> 85 <input class="number2" type="number" min="1" max="99" maxlength="2" name="suryo[]" autocomplete="off"> 86 </td> 87 </tr> 88 <tr style= "height=30px;"> 89 <td class="display-center">テスト９</td> 90 <td class="display-center">5,000</td> 91 <td class="display-center"> 92 <input class="number2" type="number" min="1" max="99" maxlength="2" name="suryo[]" autocomplete="off"> 93 </td> 94 </tr> 95 <tr style= "height=30px;"> 96 <td class="display-center">テスト１０</td> 97 <td class="display-center">5,000</td> 98 <td class="display-center"> 99 <input class="number2" type="number" min="1" max="99" maxlength="2" name="suryo[]" autocomplete="off"> 100 </td> 101 </tr> 102 </table> 103 </div> 104 <br> 105 <div class="buttonMenu"> 106 <div class="buttonMenu"> 107 <button type="submit" name="" value="" class="moveButton">確認 »</button> 108 </div> 109</form> 110 </body> 111</html>
すみません、Smartyフレームワークを使用して上記HTMLをテンプレートとして呼び出しているのですが、その旨を書き忘れておりました。
数字の処理の部分にはPHPは関係しません。
PHPもSmartyも関係ないのでしたらtplファイル内容をそのまま提示されても動作確認はできないので、
ブラウザに表示されたHTMLを提示してください。
追記させていただきました。
回答2件
0
javascript
1<input id="hoge"> 2<script> 3document.querySelector('#hoge').addEventListener('input',e=>{ 4 const reg=/\D/g; 5 const t=e.target; 6 if(reg.test(t.value)) t.value=t.value.replace(reg,''); 7}); 8</script>
投稿2021/02/03 00:23
総合スコア116690
0
convertStr2()内、１つ目のforの後に、
javascript
1fullStr2 = fullStr2.replace(/\D+/g, ''); // 数字以外を除去
とでも入れればよさそうです。
投稿2021/02/02 13:51
総合スコア21679
あなたの回答
tips
プレビュー
