入力タイプとは何を意味し、入力を制限する方法

入力タイプとは何を意味し、入力を制限する方法
入力を制限する一般的な方法
1. ボタンが押されたときに点線のボックスを消すには、入力に属性値hideFocusまたはHideFocus=trueを追加します。

コードをコピー
コードは次のとおりです。

<input type="submit" value="送信" hidefocus="true" />

2. テキストボックスの内容のみを読み取るには、入力に属性値readonlyを追加します。

コードをコピー
コードは次のとおりです。

<input type="text" 読み取り専用 />

3. 戻った後にTEXTドキュメントがクリアされないようにする(スタイルコンテンツをクラス参照として使用できます)

コードをコピー
コードは次のとおりです。

<input type="text" style="behavior:url(#default#savehistory);" />

4. ENTERキーを押すとカーソルが次の入力ボックスに移動します。

コードをコピー
コードは次のとおりです。

<input type="text" onkeydown="if(event.keyCode==13)event.keyCode=9" />

5. 中国語のみ(点滅)

コードをコピー
コードは次のとおりです。

<input type="text" onkeyup="value=value.replace(/[ -~]/g,'')" onkeydown="if(event.keyCode==13)event.keyCode=9" />

6. 数字のみ(点滅)

コードをコピー
コードは次のとおりです。

<input type="text" onkeyup="value=value.replace(/[^\d]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))" />

7. 数字のみ(点滅なし)

コードをコピー
コードは次のとおりです。

<input type="text" style="ime-mode:disabled" onkeydown="if(event.keyCode==13)event.keyCode=9" onkeypress="if ((event.keyCode<48 || event.keyCode>57)) event.returnValue=false" />

8. 英語と数字のみ入力可能(点滅)

コードをコピー
コードは次のとおりです。

<input type="text" onkeyup="value=value.replace(/[\W]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))" />

9. ブロック入力方式

コードをコピー
コードは次のとおりです。

<input type="text" name="url" style="ime-mode: disabled" onkeydown="if(event.keyCode==13)event.keyCode=9" />

10. 数字、小数点、マイナス記号(-)のみ入力できます(点滅なし)

コードをコピー
コードは次のとおりです。

<input onkeypress="if (event.keyCode!=46 && event.keyCode!=45 && (event.keyCode<48 || event.keyCode>57)) event.returnValue=false" />

11. 小数点以下2桁または3桁のみ入力可能(点滅)

コードをコピー
コードは次のとおりです。

<input type="text" maxlength="9" onkeyup="if(value.match(/^\d{3}$/))value=value.replace(value,parseInt(value/10)) ;value=value.replace(/\.\d*\./g,'.')" onkeypress="if((event.keyCode<48 || event.keyCode>57) && event.keyCode!=46 && event.keyCode!=45 || value.match(/^\d{3}$/) || /\.\d{3}$/.test(value)) {event.returnValue=false}" />

<<:  jsのディープコピーを理解しましょう

>>:  CSSは、他のレイヤーを変更せずに、多層ネスト構造の最外層を回転させる効果を実現します。

推薦する

docker によってプルされたイメージがどこに保存されるかの詳細な説明

20200804追記:記事の内容に誤りがある可能性があります。他の回答を検索することもできます。 d...

CentOS 7 に MySQL 8.0.20 データベースをインストールするための詳細なチュートリアル

関連記事: MySQL8.0.20 インストール チュートリアルとインストールの問題に関する詳細なチ...

MySql8.0バージョンに接続するMyBatisの設定問題について

mybatis を学習しているときにエラーが発生しました。エラーの内容は次のとおりです。データベース...

Dreamweaver8を使用してウェブサイトのファイルをチェックして整理する方法

Dreamweaver8 を使用して独自の Web サイトを作成する目的は何ですか?インターネットに...

Vue を使用して Web ページのスクリーンショットを撮る方法をご存知ですか?

目次1. html2Canvasをインストールする2. 必要なVueコンポーネントを導入する3. ス...

Mysql データベースの高度なビュー、トランザクション、インデックス、自己接続、ユーザー管理の例の分析の使用

この記事では、ビュー、トランザクション、インデックス、自己接続、ユーザー管理など、MySQL データ...

jQueryは画像の強調表示を実現します

ページ上の画像を強調表示することは非常に一般的です。ここでは、jQuery を使用して画像を強調表示...

独立した IP を介して Windows コンテナ イントラネットの Docker に直接アクセスする方法

Docker では、ポート マッピングを使用して、Docker コンテナーのサービスをホスト マシン...

Vue echarts は水平棒グラフを実現します

この記事では、水平棒グラフを実現するためのvue echartsの具体的なコードを参考までに共有しま...

CSS 位置プロパティが絶対の場合のパーセンテージ値の計算

位置が絶対の場合、関連する属性のパーセンテージは、参照先の要素 (包含ブロック) を基準として計算さ...

React Diff Principle の詳細な分析

目次差分アルゴリズムレイヤーごとの比較同じタイプのコンポーネントを比較する同じタイプの要素の比較子ノ...

Debian ベースの Linux システム ソフトウェア インストール コマンドの詳細な説明 (推奨)

Debian の紹介Debian は、広い意味では、フリーなオペレーティング システムの作成に専念...

WeChatアプレットが計算機機能を実装

この記事では、WeChatアプレットの計算機機能を実装するための具体的なコードを参考までに紹介します...

Linux のハードリンクとソフトリンクの原理と使用法の分析

Linux システムには、ファイル共有を解決するために使用できるリンク ファイルと呼ばれる種類のファ...

Windows 10 の Docker で countly-server を展開して実行するプロセス

私は最近countlyに触れて、慣れてきました。私は、必要に応じてcountlyのクラッシュプラグイ...