C# と VB.NET の質問掲示板

ASP.NET、C++/CLI、Java 何でもどうぞ

C# と VB.NET の入門サイト

Re[13]: Focus移動でカンマ表示

(過去ログ 159 を表示中)

[トピック内 25 記事 (1 - 20 表示)]　 << 0 | 1 >>

■92432 / inTopicNo.1)

　Focus移動でカンマ表示

▼■

□投稿者/ 初心者 (6回)-(2019/09/25(Wed) 17:18:46)

分類:[JavaScript]　

使用しているもの→ASP.NET

お世話になっております。
今回も宜しくお願い致します。

テキストボックスに金額を入力後、Focus移動でカンマを表示する処理を
実装したいと考えております。

例)
金額10000
↓確定またはfocus移動
金額10,000

実際のコード
<HTML>
<asp:TextBox ID="Txt_Amount" runat="server" ClientIDMode="Static"></asp:TextBox>

<javascrip>
//金額入力時カンマ表示
$("#Txt_Amount").on("change", function () {
var amont = Number($("#Txt_Amount").val);
amont.toLocaleString();
});

テキストボックスのイベントは取れているのですが、amontをウォッチ式で確認したところ
NaNが入っていて値が取れていませんでした。
val、textで試してもだめでした。

解決できず困っています。
何卒、宜しくお願い致します。

引用返信 編集キー/

■92434 / inTopicNo.2)

　Re[1]: Focus移動でカンマ表示

▲▼■

□投稿者/ 大谷刑部 (17回)-(2019/09/25(Wed) 17:39:14)

■No92432 (初心者さん) に返信
> 実際のコード
> <HTML>
> <asp:TextBox ID="Txt_Amount" runat="server" ClientIDMode="Static"></asp:TextBox>
>
> <javascrip>
> //金額入力時カンマ表示
> $("#Txt_Amount").on("change", function () {
> var amont = Number($("#Txt_Amount").val);
> amont.toLocaleString();
> });
>
> テキストボックスのイベントは取れているのですが、amontをウォッチ式で確認したところ
> NaNが入っていて値が取れていませんでした。
> val、textで試してもだめでした。

NaNが入っているということは、カンマ編集以前に、「Number」で数値として認識するのに失敗してませんか？
ステップ実行可能な環境なら、やってみて、もうちょっと詳細の情報を提示してください。

引用返信 編集キー/

■92435 / inTopicNo.3)

　Re[1]: Focus移動でカンマ表示

▲▼■

□投稿者/ 魔界の仮面弁士 (2396回)-(2019/09/25(Wed) 17:57:07)

■No92432 (初心者さん) に返信
> var amont = Number($("#Txt_Amount").val);

var amont = Number($("#Txt_Amount").val());

なのでは。

引用返信 編集キー/

■92436 / inTopicNo.4)

　Re[1]: Focus移動でカンマ表示

▲▼■

□投稿者/ sima (1回)-(2019/09/25(Wed) 18:11:34)

■No92432 (初心者 さん) に返信
> 
> 使用しているもの→ASP.NET
> 
> テキストボックスに金額を入力後、Focus移動でカンマを表示する処理を
> 実装したいと考えております。
> 
> 実際のコード
> <HTML>
>    <asp:TextBox ID="Txt_Amount" runat="server" ClientIDMode="Static"></asp:TextBox>
> 
> <javascrip>
>     //金額入力時カンマ表示
>     $("#Txt_Amount").on("change", function () {
>         var amont = Number($("#Txt_Amount").val);
>         amont.toLocaleString();
>     });
> 
> テキストボックスのイベントは取れているのですが、amontをウォッチ式で確認したところ
> NaNが入っていて値が取れていませんでした。
> val、textで試してもだめでした。
> 

JavaScript, jQuery についての知識に抜けがあるように見受けられます。

jQuery では jQueryオブジェクトの .val は関数なので $obj.val() か $obj.val(値) という
使い方をしてください。

それから、
<javascrip> などという不正なタグでは JavaScript のソースを記述しても動かないはずです

<script>
let $txtamount = $('input#Text_Amount');

$txtamount.on('change', function(){
  let num_value = $txtamount.val();
  let amount = Number(num_value);
});

/****/
</script>
という具合に、デバッグし易い書き方をすると間違いに気づき易いと思います

引用返信 編集キー/

■92437 / inTopicNo.5)

　Re[1]: Focus移動でカンマ表示

▲▼■

□投稿者/ WebSurfer (1924回)-(2019/09/25(Wed) 18:55:12)

■No92432 (初心者 さん) に返信

> テキストボックスに金額を入力後、Focus移動でカンマを表示する処理を
> 実装したいと考えております。
> 
> 例)
> 金額10000
> ↓確定またはfocus移動
> 金額10,000

それは今の質問者さんのコードにちょっとだけ手を加えて以下のようにすればできます。

$("#Txt_Amount").on("change", function () {
    var amont = Number($("#Txt_Amount").val());
    $("#Txt_Amount").val(amont.toLocaleString());
});

・・・が、ちょっと安易に考えていませんか？

10000 を TextBox に入力してフォーカスを外せば TextBox の表示は期待通り 10,000
となりますが、ユーザーが入力間違いに気が付いて 10,001 と入力し直してフォーカス
を外したらどうなると思いますか？

それから、ユーザー入力は必ず検証コントロールなどを使って検証しなければなりませ
ん。ASP.NET の検証コントロールはデフォルトで JavaScript による検証が有効になり
ますが、それとの兼ね合いを考える必要があります。それはどうしますか？

引用返信 編集キー/

■92444 / inTopicNo.6)

　Re[2]: Focus移動でカンマ表示

▲▼■

□投稿者/ 初心者 (7回)-(2019/09/26(Thu) 15:42:22)

■No92434 (大谷刑部さん) に返信
> NaNが入っているということは、カンマ編集以前に、「Number」で数値として認識するのに失敗してませんか？
> ステップ実行可能な環境なら、やってみて、もうちょっと詳細の情報を提示してください。

■92435 (魔界の仮面弁士さん) に返信
>var amont = Number($("#Txt_Amount").val());
なのでは。

最初に、ご回答ありがとうございます。
魔界の仮面弁士さんのおっしゃる通り$("#Txt_Amount").val()の()が無かったために
Numberで数値として認識されていませんでした。

ご指摘ありがとうございました。

引用返信 編集キー/

■92445 / inTopicNo.7)

　Re[2]: Focus移動でカンマ表示

▲▼■

□投稿者/ 初心者 (8回)-(2019/09/26(Thu) 15:46:37)

■No92436 (sima さん) に返信

> <javascrip> などという不正なタグでは JavaScript のソースを記述しても動かないはずです
>
> <script>
> let $txtamount = $('input#Text_Amount');
>
> $txtamount.on('change', function(){
> let num_value = $txtamount.val();
> let amount = Number(num_value);
> });
>
> /****/
> </script>
> という具合に、デバッグし易い書き方をすると間違いに気づき易いと思います

ご回答ありがとうございます。

<javascrip>と記述したのは回答してくださる方に、分かりやすく伝えるために書きました。
紛らわしいかっこの書き方をしてしまい申し訳ございませんでした。

引用返信 編集キー/

■92446 / inTopicNo.8)

　Re[2]: Focus移動でカンマ表示

▲▼■

□投稿者/ 初心者 (9回)-(2019/09/26(Thu) 15:52:31)

■No92437 (WebSurfer さん) に返信

> それは今の質問者さんのコードにちょっとだけ手を加えて以下のようにすればできます。
>
> $("#Txt_Amount").on("change", function () {
> var amont = Number($("#Txt_Amount").val());
> $("#Txt_Amount").val(amont.toLocaleString());
> });

回答ありがとうございます。
WebSurferさんのおかげで解決いたしました。

> 10000 を TextBox に入力してフォーカスを外せば TextBox の表示は期待通り 10,000
> となりますが、ユーザーが入力間違いに気が付いて 10,001 と入力し直してフォーカス
> を外したらどうなると思いますか？

すみません、そこまで深く考えておりませんでした。
そのまま10,001と表示されるのではないんですか？

> それから、ユーザー入力は必ず検証コントロールなどを使って検証しなければなりませ
> ん。ASP.NET の検証コントロールはデフォルトで JavaScript による検証が有効になり
> ますが、それとの兼ね合いを考える必要があります。それはどうしますか？

検証コントロールを使ったことが無く、何か不都合があればエラーメッセージをとばすなど
別のやり方で処理をしていました。

引用返信 編集キー/

■92447 / inTopicNo.9)

　Re[3]: Focus移動でカンマ表示

▲▼■

□投稿者/ 初心者 (10回)-(2019/09/26(Thu) 15:54:37)

とりあえず解決いたしましたので解決済みにさせて頂きます。

解決済み

引用返信 編集キー/

■92453 / inTopicNo.10)

　Re[3]: Focus移動でカンマ表示

▲▼■

□投稿者/ WebSurfer (1926回)-(2019/09/26(Thu) 17:18:47)

■No92446 (初心者さん) に返信

> そのまま10,001と表示されるのではないんですか？

やってみてください。10,001 としてフォーカスを外すと同じスクリプトが動いて
NaN と表示されると思います。

> 検証コントロールを使ったことが無く、何か不都合があればエラーメッセージをとばすなど
> 別のやり方で処理をしていました。

既存の検証コントロールを使うのと同等以上のセキュリティを確保できた上で、どうしても
「別のやり方」でなければならいのでなければ、自己流は絶対ダメだと思います。

解決済み

引用返信 編集キー/

■92460 / inTopicNo.11)

　Re[4]: Focus移動でカンマ表示

▲▼■

□投稿者/ 初心者 (11回)-(2019/09/27(Fri) 16:53:26)

■No92453 (WebSurfer さん) に返信
> ■No92446 (初心者さん) に返信

> やってみてください。10,001 としてフォーカスを外すと同じスクリプトが動いて
> NaN と表示されると思います。

やってみたのですがそのまま10,001と表示されました。
必ずしも10,000じゃなきゃだめという訳ではないので、あくまで例としてあげたので
このままで大丈夫です。
希望通りです。ありがとうございました。

> 既存の検証コントロールを使うのと同等以上のセキュリティを確保できた上で、どうしても
> 「別のやり方」でなければならいのでなければ、自己流は絶対ダメだと思います。

検証コントロールを使用したことがないので分からないのですが、それ相応の処理はしているので大丈夫です。
アドバイスありがとうございました。今後の参考にしたいと思います。

解決済み

引用返信 編集キー/

■92461 / inTopicNo.12)

　Re[5]: Focus移動でカンマ表示

▲▼■

□投稿者/ WebSurfer (1928回)-(2019/09/27(Fri) 17:39:33)

■No92460 (初心者さん) に返信

> やってみたのですがそのまま10,001と表示されました。
> 必ずしも10,000じゃなきゃだめという訳ではないので、あくまで例としてあげたので
> このままで大丈夫です。

話が通じてますか？　考え違いしてませんか？

まずテキストボックスに 10000 と入力してフォーカスを外し 10,000 と表示されたら、またテキストボックス
にフォーカスを当てて 10,000 の最後の 0 を 1 に直して（即ち 10,001 にして）フォーカスを外すのですよ。

そうすると、

var amont = Number($("#Txt_Amount").val());

の $("#Txt_Amount").val() は 10,001 なので amont は NaN になって、次の行の amont.toLocaleString() も
NaN になって、テキストボックスには NaN と表示されるはずです。

そんなことはユーザーはしない？　自分がユーザーだったら間違えて入力したらそのようにしますけど。

> 検証コントロールを使用したことがないので分からないのですが、それ相応の処理はしているので大丈夫です。

「それ相応の処理はしているので大丈夫です」という自信がどこから来るのか分かりません。

質問者さんの作ったアプリで何が起ころうが完全に質問者さんの責任の範囲で処理できるならお好きなようにと
しか言いようがないですけど。

引用返信 編集キー/

■92491 / inTopicNo.13)

　Re[6]: Focus移動でカンマ表示

▲▼■

□投稿者/ 初心者 (12回)-(2019/09/30(Mon) 17:55:40)

■No92461 (WebSurfer さん) に返信
> ■No92460 (初心者さん) に返信

> そんなことはユーザーはしない？　自分がユーザーだったら間違えて入力したらそのようにしますけど。
>

その辺の処理については自分で一度考えたいと思います。

> 質問者さんの作ったアプリで何が起ころうが完全に質問者さんの責任の範囲で処理できるならお好きなようにと
> しか言いようがないですけど。

私はあくまで質問した内容だけを教えて頂きたかっただけなのでアドバイスとしては嬉しいのですが、そこまで言われる筋合いはないと思うのですが．．．。
それに一人で作成している訳ではないので仕様が決まってるんです。
勝手に変更することはできないので申し訳ないです。

引用返信 編集キー/

■92494 / inTopicNo.14)

　Re[7]: Focus移動でカンマ表示

▲▼■

□投稿者/ WebSurfer (1933回)-(2019/09/30(Mon) 20:19:55)

■No92491 (初心者さん) に返信

> その辺の処理については自分で一度考えたいと思います。

自分としてはかなりよく考えてアドバイスしてるつもりです。なのであなたも、適当に済ま
せないでよく考えてください

> 私はあくまで質問した内容だけを教えて頂きたかっただけなのでアドバイスとしては嬉しいのですが、
> そこまで言われる筋合いはないと思うのですが．．．。

いや、ありますよ。あなたもしくはあなたの属する組織が開発したソフトの問題のせい
で、ロケットが落ちたりインフラが止まったり、そこまで行かなくても個人情報の漏洩
につながって私の個人情報が悪用されたりしないということは保証できますか？

だから、

> 質問者さんの作ったアプリで何が起ころうが完全に質問者さんの責任の範囲で処理できるならお好きなようにと
> しか言いようがないですけど。

と言ったのです。それであればあなたの勝手にしたらいいです。

引用返信 編集キー/

■92495 / inTopicNo.15)

　Re[8]: Focus移動でカンマ表示

▲▼■

□投稿者/ 酷いなあ (1回)-(2019/09/30(Mon) 23:16:53)

因縁を付けるとはこのことですな

引用返信 編集キー/

■92499 / inTopicNo.16)

　Re[7]: Focus移動でカンマ表示

▲▼■

□投稿者/ 大谷刑部 (23回)-(2019/10/01(Tue) 09:47:36)

■No92491 (初心者さん) に返信
> ■No92461 (WebSurfer さん) に返信
>>■No92460 (初心者さん) に返信
>
>>そんなことはユーザーはしない？　自分がユーザーだったら間違えて入力したらそのようにしますけど。
>>
>
> その辺の処理については自分で一度考えたいと思います。

onFocusでカンマとる処理とかで解決するんじゃ？
実際のその程度のことググりゃすぐ出てくるし、プロのSEなら言われなくたってわかるでしょ。普通。
それを求めてもいないのにしつこく詰問する奴の気がしれん。
相手にする必要ないと思うよ。

>>質問者さんの作ったアプリで何が起ころうが完全に質問者さんの責任の範囲で処理できるならお好きなようにと
>>しか言いようがないですけど。
>
> 私はあくまで質問した内容だけを教えて頂きたかっただけなのでアドバイスとしては嬉しいのですが、そこまで言われる筋合いはないと思うのですが．．．。
> それに一人で作成している訳ではないので仕様が決まってるんです。
> 勝手に変更することはできないので申し訳ないです。

お気持ちよくわかります。
技術的に正解=現場の最適解じゃないわけで。
その辺ことも理解しないで、技術的なべき論を押し付けるような問答をここじゃありませんが、されたことがあります。
正直そういう回答者は不快です。
本当に優れている人はこんな変な嫌味言わんでしょ？
例えば弁さんとか。
どの回答者の意見を取り入れるかなんて質問者の自由。
お気になさらず、どうするかは自分で現場の人と相談して決めればいいと思います。

引用返信 編集キー/

■92500 / inTopicNo.17)

　Re[9]: Focus移動でカンマ表示

▲▼■

□投稿者/ 大谷刑部 (24回)-(2019/10/01(Tue) 09:49:46)

■No92495 (酷いなあさん) に返信
> 因縁を付けるとはこのことですな
>

そう思うが、これ以上の問答は質問者も求めてないと思うのでCloseで。

解決済み

引用返信 編集キー/

■92508 / inTopicNo.18)

　Re[8]: Focus移動でカンマ表示

▲▼■

□投稿者/ ピュアレッド (1回)-(2019/10/01(Tue) 14:40:47)

ロケットが落ちたりインフラが止まったりする恐れのある質問をここでするか？

解決済み

引用返信 編集キー/

■92515 / inTopicNo.19)

　Re[7]: Focus移動でカンマ表示

▲▼■

□投稿者/ WebSurfer (1934回)-(2019/10/01(Tue) 18:09:59)

■No92491 (初心者さん) に返信

この先は自分で考えて対応するからこれ以上のアドバイスは不要ということかもしれま
せんが、以下のスレッドの質問者さんのように諦めない心で、他人のアドバイスに耳を
傾けていろいろトライしてみれば、より望ましい解決方法が見つかるかもしれませんよ。

3桁コンマ区切り数字をコンマ無しでFrom送信したい
https://teratail.com/questions/173554

興味があれば連絡してください。

引用返信 編集キー/

■92517 / inTopicNo.20)

　Re[8]: Focus移動でカンマ表示

▲　■

□投稿者/ kaina (51回)-(2019/10/01(Tue) 18:31:54)

解決済みチェックを勝手に外さないように！

解決済み

引用返信 編集キー/

次の20件＞
トピック内ページ移動 / << 0 | 1 >>

- Child Tree -