JavaScriptフレームワーク(xmlplus)コンポーネント入門(3)TextBox(テキストボックス)
xmlplus は、フロントエンドおよびバックエンド プロジェクトを迅速に開発するための JavaScriptフレームワーク です。この記事では、主に xmlplus コンポーネント設計シリーズのテキスト ボックスを紹介します。興味のある方は、このページで最もよく使用される入力コンポーネントを参照してください。
もちろん、ここの `type='text' は省略可能です。ほとんどの場合、デフォルトのテキストボックスを入力コンポーネントとして使用しても問題ありませんが、特定のプロジェクトでは必然的に機能拡張が必要になります。ここでは、ネイティブ テキスト ボックス コンポーネントを拡張する方法を説明するための例として、テキスト ボックス データの
出力機能を追加する方法のみを取り上げます。この章の内容に加えて、公式ドキュメントの「パラメータ マッピング」の章も参照できます。
ターゲットコンポーネントの機能分析
次の例に示すように、ネイティブテキストボックスの場合、取得する値はテキストタイプです:
Example: { xml: "<input id='input' value='text'/>", fun: function (sys, items, opts) { console.log(typeof this.prop("value")); // string } }
typeの値が必要な場合は、取得したデータをフォーマットする必要があります。たとえば、整数が必要な場合は、parseInt 関数 を使用する必要があり、 浮動小数点 数値が必要な場合は、parse Float 関数を使用する必要があります。データのフォーマット操作をカプセル化できれば、非常に便利になります。私たちの期待を明確にするために、ターゲット コンポーネント の使用例を示すこともできます。 Index: {
xml: "<p id='index'>\
<TextBox id='foo'/>\
<TextBox id='bar' format='int'/>\
</p>",
fun: function (sys, items, opts) {
items.foo.value = "hello, world";
items.bar.value = 27.1828;
console.log("foo", items.foo.value);
console.log("bar", items.bar.value);
}
}
インターフェース入力としてフォーマットパラメーターを受け取り、動的入出力インターフェースとしてプロパティ値を提供することができます。 format パラメータには、string (デフォルト)、int、float の 3 つの値があります。これら 3 つの値は、3 つの データ型 : 文字列、整数、および浮動小数点に対応します。属性値は、format の値に従って入力と出力をフォーマットします。例の出力は次のようになります: hello, world227
ターゲットコンポーネントの実装
上記のターゲットコンポーネントを完成させるために、最初にテキストボックスのコンポーネントフレームワークを与えます。
TextBox: { xml: "<input id='input' type='text'/>", opt: { format: "string" }, fun: function (sys, items, opts) { var parse = {"int": parseInt, "float": parseFloat, "string": String}[opts.format]; function getValue() { // 这里需要获取 input 的值并根据 opts.format 值选择适当的格式化函数, } function setValue(value) { // 这里需要根据 opts.format 值选择适当的格式化函数,对 value 进行格式化后同去赋值 } return Object.defineProperty({}, "value", { get: getValue, set: setValue }); } }
クエリ
メソッドを使用することです。この関数は、コンポーネントの初期化フェーズ中に準備が整っています。上記の解析関数は、必要なフォーマット関数です。ただし、このコンポーネントの書式設定関数のタイプは、コンポーネントの初期化時に固定されることに注意してください。変数フォーマット関数が必要な場合は、コンポーネントにいくつかの変更を加える必要があります。完全なテキスト ボックス コンポーネントを以下に示します。TextBox: { xml: "<input id='input' type='text'/>", opt: { format: 'string' }, map: { attrs: { input: "disabled value placeholder readonly" } }, fun: function (sys, items, opts) { var parse = {"int": parseInt, "float": parseFloat, "string": String}[opts.format]; function getValue() { return parse(sys.input.prop("value")); } function setValue(value) { sys.input.prop("value", parse(value)); } return Object.defineProperty({}, "value", { get: getValue, set: setValue }); } }
以上がJavaScriptフレームワーク(xmlplus)コンポーネント入門(3)TextBox(テキストボックス)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











Onenote は、Microsoft が提供する最高のメモ作成ツールの 1 つです。 Onenote を Outlook や MSTeams と組み合わせると、仕事と個人の創造的な生産性を向上させるための強力な組み合わせになります。違う形式でメモを取らなければなりませんが、それは単に物事を書き留めるだけではないかもしれません。日々の仕事の中で、さまざまなソースから画像をコピーし、編集を行う必要がある場合があります。変更を適用する方法を知っていれば、Onenote に貼り付けた画像は大いに役立ちます。 Onenote を使用しているときに、Onenote に貼り付けられた画像が快適に作業できないという問題に遭遇したことはありますか?この記事では、Onenote で画像を効果的に使用する方法について説明します。我々はできる

PowerPoint でクリックする前にテキストを非表示にする方法 PowerPoint スライド上の任意の場所をクリックしたときにテキストを表示したい場合、設定はすばやく簡単です。 PowerPoint でボタンをクリックする前にテキストを非表示にするには: PowerPoint ドキュメントを開き、[挿入] メニューをクリックします。 「新しいスライド」をクリックします。 [空白] または他のプリセットのいずれかを選択します。 [挿入] メニューで [テキスト ボックス] をクリックします。テキスト ボックスをスライド上にドラッグします。テキストボックスをクリックして、あなたの名前を入力してください

Word で表を使用してカレンダーを作成する方法 自分の仕様に正確に適合するカレンダーを作成したい場合は、Word の表を使用してすべてを最初から作成できます。これにより、カレンダーに必要な正確なレイアウトをデザインできます。 Word で表を使用してカレンダーを作成する: 新しい Word 文書を開きます。 Enter キーを数回押して、カーソルをページの下に移動します。 「挿入」メニューをクリックします。リボンで、表アイコンをクリックします。左上の四角をクリックして押したまま、7×6 の表をドラッグします。 1行目に曜日を書きます。別のカレンダーを参照として使用して、月の日付を記入します。当月以外の日付を強調表示します。メイン メニューで、テキストの色のアイコンをクリックし、グレーを選択します。当月については、次から始めます

HTML テキスト ボックスの種類には、単一行テキスト ボックス、パスワード テキスト ボックス、数値テキスト ボックス、日付テキスト ボックス、時刻テキスト ボックス、ファイル アップロード テキスト ボックス、複数行テキスト ボックスなどが含まれます。詳細な紹介: 1. 単一行テキスト ボックスは、単一行テキスト入力を受け入れるために使用される最も一般的なタイプのテキスト ボックスです。ユーザーはテキスト ボックスにユーザー名、パスワード、電子メール アドレスなどの任意のテキストを入力できます。など; 2. パスワードのテキストボックスが使用されます パスワードの入力を受け入れるために、ユーザーがパスワードを入力すると、ユーザーのプライバシーを保護するためにテキストボックスの内容が非表示になります; 3. 数字のテキストボックスなど

HTML テキスト領域に改行文字を追加するには、HTML 改行タグを使用して任意の場所に改行文字を挿入します。あるいは、CSS プロパティ「white-space:pre-wrap」を使用して、テキストに自動的に改行を追加することもできます。これは、フォーマット済みのテキストをテキスト領域に表示する場合に特に便利です。それでは、改行を追加する方法について説明しましょう。このメソッドは HTML 内にテキスト領域を作成し、それに ID を割り当てます。クリックすると、改行を使用してテキスト領域のテキストを分割するボタンを作成します。次に、テキストを改行に分割する関数を作成します。この関数のコードは -functionreplacePeriodsWithLineBreaks() です。

タイトル: スクロールバー付きHTMLテキストボックスコードの書き方 HTMLのテキストボックスはよく使われるユーザー入力コントロールの1つですが、テキストの内容が長すぎると、テキストボックスが不完全に表示されてしまう場合があります。この時点で、スクロールをサポートするためにテキスト ボックスにスクロール バーを追加できます。この記事では、スクロールバー効果を備えたHTMLテキストボックスコードの書き方と具体的なコード例を詳しく紹介します。 1. textarea 要素を使用してテキスト ボックスを作成する HTML では、textarea 要素を使用してテキスト ボックスを作成します。

HTML でテキスト ボックスを整列する方法: 1. テキストの整列; 2. Flexbox レイアウトの整列を使用する; 3. グリッド レイアウトの整列を使用する; 4. 微調整にマージンまたは位置を使用する。

テキストボックスの枠線の色を設定する方法: 1. 枠線を追加するテキストまたは段落を選択します; 2. 「ホーム」タブの「段落」または「フォント」グループで、「枠線」をクリックします。 」ボタン; 3. ドロップダウン メニューから境界線のスタイルを選択します; 4. [境界線の色] ボタンをクリックし、ポップアップ メニューで希望の色を選択します; 5. [OK] ボタンをクリックして境界線を適用しますスタイルと色。
