フォーム入力ボックスに関するWebデザインのヒント

フォーム入力ボックスに関するWebデザインのヒント
1. キャンセル ボタンが押されたときの破線ボックス<br /> 入力に属性値 hideFocus または HideFocus=true を追加します
2. 読み取り専用テキストボックスの内容

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

<INPUTstyle=behavior:url(#default#savehistory);type=textid=oPersistInput>
4. ENTERキーを押すとカーソルが次の入力ボックスに移動します。
<inputonkeydown="if(event.keyCode==13)event.keyCode=9">
5. 中国語のみ(点滅)
<inputonkeyup="value=value.replace(/[-~]/g,'')"onkeydown="if(event.keyCode==13)event.keyCode=9">
6. 数字のみ(点滅)
<inputonkeyup="value=value.replace(/[^/d]/g,'')"onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^/d]/g,''))">
7. 数字のみ(点滅なし)
<inputstyle="ime-mode: disabled"onkeydown="if(event.keyCode==13)event.keyCode=9"onKeyPress="if((event.keyCode<48||event.keyCode>57))event.returnValue=false">

8. 英語と数字のみ入力可能(点滅)
<inputonkeyup="value=value.replace(/[/W]/g,'')"onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^/d]/g,''))">
9. ブロック入力方式
<inputtype="text"name="url"style="ime-mode:disabled"onkeydown="if(event.keyCode==13)event.keyCode=9">
10. 数字、小数点、マイナス記号(-)のみ入力できます(点滅なし)
<inputonKeyPress="if(event.keyCode!=46&&event.keyCode!=45&&(event.keyCode<48||event.keyCode>57))event.returnValue=false">
11. 小数点以下2桁または3桁のみ入力可能(点滅)
<inputmaxlength=9onkeyup="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}"id=text_kfxename=text_kfxe>

<<:  分散監視システムにおけるZabbixのアクティブ、パッシブ、Web監視のプロセスの詳細な説明

>>:  MySQL SHOW STATUSステートメントの使用

推薦する

docker を使用してシンプルな C/C++ プログラムをデプロイする方法

1. まずhello-world.cppファイルを作成しますプログラムコードは次のとおりです。 #i...

PHP環境構築におけるDockerの柔軟な実装

Docker を使用して、柔軟なオンライン PHP 環境を構築します。場合によっては、他の人がすでに...

CSS変換ページめくりアニメーションレコードの実装

ページめくりの問題のシナリオBとCは同じページ(表と裏)にありますページをめくって A をカバーした...

Reactでファイルパスエイリアスを素早く設定する方法

React は、ユーザー インターフェイスを構築するための JavaScript ライブラリです。F...

FirefoxのWeb開発者を使用してWebページのスタイルを無効にする方法

前提条件: Web開発者プラグインがインストールされている操作手順: [ツール] -> [We...

crontab でスケジュールされたタスクが実行されない理由の概要

序文最近、仕事でいくつかの問題が発生しました。crontab でスケジュールされたタスクが実行されま...

MySQL データ型 DECIMAL の詳細な分析

序文:金額の保存など、小数点数を保存し、精度要件がある場合、通常は DECIMAL フィールド タイ...

Centos 7 システムの Tomcat サーバーの詳細な分析

目次1. tomcatの起源1. Tomcat アプリケーションのシナリオ2. Tomcatに必要な...

CentOS 7 で rpm パッケージを使用して MySQL 5.7.18 をインストールする

最近、MySQL を使っています。Linux での mysql-installation という記事...

nginxカスタム変数と組み込み定義済み変数の使用

概要Nginx では変数を使用して設定を簡素化し、設定の柔軟性を向上させることができます。すべての変...

Docker 用ビジュアル UI 管理ツール Portainer のインストールと使用方法の分析

Portainer は、ステータス表示パネル、アプリケーション テンプレートの迅速な展開、コンテナ ...

Dockerコンテナが外部ネットワークにpingできない問題を解決する

今日、docker で redis 環境を構築していたところ、yum がリソースを取得できず、インタ...

MySql で正規表現クエリを使用する方法

正規表現は、特定のパターンに一致するテキストを検索および置換するためによく使用されます。たとえば、テ...

SQL の左結合と右結合の原理と例の分析

テーブルが 2 つあり、テーブル A のレコードがテーブル B に存在しない可能性があります。左結合...

CSS で 3 列レイアウトを実装するいくつかの方法と利点と欠点

序文3 列レイアウトは、その名前が示すように、両側が固定され、中央が適応します。実際の開発では、3 ...