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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

Q&A

解決済

1回答

1054閲覧

<input type="time">で全角入力するとフォーカスが外れてしまう

k.t.est

総合スコア49

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

0グッド

0クリップ

投稿2018/05/17 07:31

タブキーでフォーカスを移動させて(もしくは前のinputタグ入力でフォーカスをjavascriptで移動させて)、input[type=time]タグに全角で文字入力をしようするとフォーカスが外れてしまい、他のinputタグにフォーカスされてしまいます。
javascriptなどを利用して、フォーカスを外さずに全角から半角にする何かいい方法が方法がありますでしょうか?
ご教示頂ければ幸甚です。

html

1<input type="text" name="name"> 2<input type="time" name="time">

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

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

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

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

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

guest

回答1

0

ベストアンサー

ブラウザによって挙動が変わるようには思いますけど、全角が受け入れられないのはブラウザの仕様によるものなので、
全てのブラウザで同じように ということでしたらtype=textにして入力チェックで
全角入力時はNGとしたら良いのでは。
ユーザー入力値を自動で変換するのはあまり良いやり方ではありません。

投稿2018/05/17 07:46

m.ts10806

総合スコア80765

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

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

k.t.est

2018/05/17 08:06

ご回答有難う御座います。ブラウザはChromeで固定なのですが、やはりtype=textにするのがいいのでしょうか?手前のinputタグで名前を入力するため、ユーザーの入力初期値が全角になっている為、全角入力でも受け入れられる方法にしないとUX上よくないと考えているのですが、それでも自動変換はよくない方法でしょうか?ご教示頂けますと幸甚です。
m.ts10806

2018/05/17 08:14

自動変換はどのような理由があっても良くありません。 UX上と言われるのでしたら勝手に変換される方がユーザーは戸惑うのではないかと。 もちろん補足として「半角のみ」など入力を制限するような文言を入れておくことは必須です。 後やり方としては今回のようなtimeでしたらreadonly属性を引いてtimepickerを導入して選ばせるというのもありです。 いずれにしてもサーバーサイドでの入力チェックは必須です。 ※例え制御しようとしてもブラウザ開発ツールなどから改ざんして全角を送り込むことは可能だからです
k.t.est

2018/05/17 08:24

timepickerにて対応することに致します!有難う御座いました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問