4

新しい html5 テンプレート タグを使用して、JavaScript をあまり使用せずに複数のユース ケースに配置できる半汎用フォームを作成しようとしています。

ここに私が持っているものを示すフィドルがありますhttp://jsfiddle.net/684uH/

<content>私の目標は、プレースホルダーテキストの「名前」を、通常タグにあるものに置き換えることです

私の主張を理解するための架空の例は次のとおりです。

<div id = "hoster">
    <span class = "inputPlaceholder">Special Name</span>
</div>

<template id = "im-a-template">
    <input type="text" placeholder = <content select = ".inputPlaceholder"></content>>
</template>

同様のことを行う方法はありますか、それとも javascript を使用して手動で設定する唯一の方法ですか?

4

1 に答える 1

-1

これを行うには、クライアントで XSLT を使用します。

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="html5.xhtml"?>
<xsl:stylesheet version="1.0"
            xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/1999/xhtml"
            >
<xsl:output method="xml" encoding="utf-8" version="" indent="yes" standalone="no" media-type="text/html" omit-xml-declaration="no" doctype-system="about:legacy-compat" />

<!-- Run default templates on the xsl-stylesheet element above-->
<xsl:template match="xsl:stylesheet">
  <xsl:apply-templates/>
</xsl:template>

<!-- Run this template on the root node -->
<xsl:template match="/">
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    </head>
    <body>
      <div id="hoster">
        <span class="inputPlaceholder">Special Name</span>
      </div>

      <!-- Reuse the value of the node with the inputPlaceholder class -->
      <template id="im-a-template">
        <input type="text" placeholder="{//node()[@class='inputPlaceholder']}"/>
      </template>
    </body>
  </html>
</xsl:template>

</xsl:stylesheet>

次のプロセスを使用します。

  • 名前を付けて保存しますhtml5.xhtml(または<?xml-stylesheet href、選択した名前に変更します)。
  • ブラウザで開く
  • スクリプト タグを追加して<template>、選択したポリフィルを実行します

参考文献

于 2014-10-10T18:46:32.307 に答える