1

インタラクティブな PDF ドキュメントで見られるような、アンケートのようなフォーム用の複数行フィールドを作成したいと考えています。

入力フィールドは幅全体にまたがる必要があり、行末または少なくとも一定数の文字の後で折り返す必要があります。キャプションは必ずしも同じ行にある必要はありません:

自己紹介をお願いします： _____________________________
________________________________________________________

これを達成するために私が試みたことがいくつかあります：

  • <p contentEditable="true">または、最後の行でのみ機能し、空のスペースをカバーしないため、機能しませんでした<textarea>。border-bottom:text-decoration: underline;
  • 次に、<input type="text">互いの下に複数を作成し、javascript イベントを使用してテキストをラップしました。これは単純なテキスト入力では機能しますが、テキストの選択、テキストの挿入などで失敗します。これは複雑になりすぎます。これはできるだけ多くの電子ブック デバイスをサポートする必要があるため、おそらくテスト フェーズを乗り切ることはできません。

これを ePUB ブック内で使用したいのですが、web-browser-behaviour に関する回答を自由に投稿してください。私はJQueryを使いたくありません。

4

1 に答える 1

1

不明な行の高さをカバーするには、JavaScript を使用して、テキスト行を追加して行の高さを決定し、高さの差を測定します。2 番目のステップでheightは、編集可能領域内に line-height が含まれている場合、背景画像を動的に生成できます。

var svg = "<svg xmlns='http://www.w3.org/2000/svg' width='1' height='" + height + "'><line x1='0' y1='" + height + "' x2='1' y2='" + height + "' stroke='black' stroke-width='1px'/></svg>";
your_element.setAttribute('style','background-image: url("data:image/svg+xml;utf8,' + svg + '")}');

これにより、互換性の問題である可能性のある svg-image が作成されます。幅広いクロスブラウザーのサポートが必要な場合は、次のこともできます。

  • 可能なすべての高さの画像を保存するだけです
  • その場でgif/pngを作成し、base64を使用してエンコードします

私の場合、*.ePUB-Books を読むために iPad-App iBook で動作するだけで済みました。

于 2013-09-03T06:10:00.247 に答える