ホームページ ウェブフロントエンド jsチュートリアル JavaScriptフレームワーク(xmlplus)コンポーネント入門(3)TextBox(テキストボックス)

JavaScriptフレームワーク(xmlplus)コンポーネント入門(3)TextBox(テキストボックス)

May 04, 2017 am 10:21 AM
テキストボックス

xmlplus は、フロントエンドおよびバックエンド プロジェクトを迅速に開発するための JavaScriptフレームワーク です。この記事では、主に xmlplus コンポーネント設計シリーズのテキスト ボックスを紹介します。興味のある方は、このページで最もよく使用される入力コンポーネントを参照してください。


もちろん、ここの `type='text' は省略可能です。ほとんどの場合、デフォルトのテキストボックスを入力コンポーネントとして使用しても問題ありませんが、特定のプロジェクトでは必然的に機能拡張が必要になります。ここでは、ネイティブ テキスト ボックス コンポーネントを拡張する方法を説明するための例として、テキスト ボックス データの

フォーマットされた入力

出力機能を追加する方法のみを取り上げます。この章の内容に加えて、公式ドキュメントの「パラメータ マッピング」の章も参照できます。

ターゲットコンポーネントの機能分析


次の例に示すように、ネイティブテキストボックスの場合、取得する値はテキストタイプです:

Example: {
  xml: "<input id=&#39;input&#39; value=&#39;text&#39;/>",
  fun: function (sys, items, opts) {
    console.log(typeof this.prop("value")); // string
  }
}
ログイン後にコピー

other

typeの値が必要な場合は、取得したデータをフォーマットする必要があります。たとえば、整数が必要な場合は、parseInt 関数 を使用する必要があり、 浮動小数点 数値が必要な場合は、parse Float 関数を使用する必要があります。データのフォーマット操作をカプセル化できれば、非常に便利になります。私たちの期待を明確にするために、ターゲット コンポーネント の使用例を示すこともできます。

この例では、2 つのコンポーネントの入力をインスタンス化します。コンポーネントの入力により、

静的

インターフェース入力としてフォーマットパラメーターを受け取り、動的入出力インターフェースとしてプロパティ値を提供することができます。 format パラメータには、string (デフォルト)、int、float の 3 つの値があります。これら 3 つの値は、3 つの データ型 : 文字列、整数、および浮動小数点に対応します。属性値は、format の値に従って入力と出力をフォーマットします。例の出力は次のようになります: hello, world227



ターゲットコンポーネントの実装


上記のターゲットコンポーネントを完成させるために、最初にテキストボックスのコンポーネントフレームワークを与えます。

TextBox: {
  xml: "<input id=&#39;input&#39; type=&#39;text&#39;/>",
  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=&#39;input&#39; type=&#39;text&#39;/>",
  opt: { format: &#39;string&#39; },
  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 });
  }
}
ログイン後にコピー
また、上記のコンポーネントにはいくつかの属性マッピング コンテンツが追加されており、特定のプロジェクトで必要に応じて追加または削除できることにも注意してください。 この一連の記事は、xmlplus フレームワークに基づいています。 xmlplus についてあまり詳しくない場合は、www.xmlplus.cn にアクセスしてください。詳細な入門ドキュメントはここから入手できます。

以上がJavaScriptフレームワーク(xmlplus)コンポーネント入門(3)TextBox(テキストボックス)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

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

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

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

OneNote で画像を背景として設定する方法 OneNote で画像を背景として設定する方法 May 14, 2023 am 11:16 AM

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

パワーポイントでクリックするまでテキストを非表示にする方法 パワーポイントでクリックするまでテキストを非表示にする方法 Apr 14, 2023 pm 04:40 PM

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

Wordでカレンダーを作る方法 Wordでカレンダーを作る方法 Apr 25, 2023 pm 02:34 PM

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

HTMLテキストボックスにはどのような種類があるのでしょうか? HTMLテキストボックスにはどのような種類があるのでしょうか? Oct 12, 2023 pm 05:38 PM

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

HTMLテキストボックスに改行を追加するにはどうすればよいですか? HTMLテキストボックスに改行を追加するにはどうすればよいですか? Sep 04, 2023 am 11:05 AM

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

HTML スクロール バー テキスト ボックスをコーディングする方法 HTML スクロール バー テキスト ボックスをコーディングする方法 Feb 19, 2024 pm 07:38 PM

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

HTMLでテキストボックスを整列させる方法 HTMLでテキストボックスを整列させる方法 Mar 27, 2024 pm 04:33 PM

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

テキストボックスの枠線の色を設定する方法 テキストボックスの枠線の色を設定する方法 Jul 28, 2023 am 10:08 AM

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

See all articles