4

重複の可能性:
HTML の空白を無視する

私はオランダのレシピのウェブサイトを作成しています。この問題は、Javascript を使用して新しいフォーム フィールドを追加するときに発生する視覚的なエラーです。

問題が発生する場所

必要なすべての成分を説明するために、HTML で事前に定義されている既存の成分フォーム フィールドに、ユーザーがさらに成分フォーム フィールドを追加できるようにします。「別の成分を追加」というボタンを押すと、これらの新しいフィールドを追加できます。addIngredient() と呼ばれる JavaScript 関数は onclick と呼ばれます (わかりやすくするために省略されています。完全なコードはここにあります)。

function addIngredient() {
  ingredientCount++;

  //define the elements that should be created
  var Group = document.createElement("span");
  var Quantity = document.createElement("input");
  var Unit = document.createElement("input");
  var Type = document.createElement("input");
  var lineBreak = document.createElement("br");

  //set the attributes for each element
  Group.setAttribute("id", "ingredient_" + ingredientCount);
  Quantity.setAttribute("type", "text");
  Unit.setAttribute("type", "text");
  Type.setAttribute("type", "text");

  //add the ingredient group span and linebreak to the ingredients div
  var ingredientList = document.getElementById("ingredienten");
  ingredientList.appendChild(Group);
  ingredientList.appendChild(lineBreak);

  //add the ingredient form elements to the ingredient group span
  var addElements = document.getElementById("ingredient_" + ingredientCount);
  addElements.appendChild(Quantity);
  addElements.appendChild(Unit);
  addElements.appendChild(Type);
}

何が起こるのですか

JavaScript によって追加された入力要素は、HTML によって事前に作成されたものとは異なる間隔を持っているように見えます。視覚的なエラーを示すスクリーン キャプチャを次に示します。

間隔の不一致

この余分なスペースは、事前に作成された入力要素を定義する HTML からリターンを削除すると消えます。

返品あり:

<span>
  <input>
  <input>
  <input>
</span><br>

返品なし:

<span>
  <input><input><input>
</span><br>

このことから、HTML で作成された要素は、コードの書き方によって間隔や位置が実際に影響を受けると結論付けられます。Javascriptで作成したフォーム要素は、もちろん改行なしで生成されるため、こうした余分なスペースは存在しません。

私の質問

率直に言って、HTML で改行を押すと Web ページにスペースが出力されるようで、少しショックを受けています。コードの書式設定によってページに何かが追加されるというのはばかげていると思います。発生を防ぐために、コード内のリターンを削除したくありません。

フォーム要素間のスペースが表示されないようにするために、コードからリターンを削除する以外に方法はありますか?

4

4 に答える 4

2

HTML 要素内では、空白は 1 つのスペースに正規化されます。いくつかのテキスト、7 つのスペース文字、さらにいくつかのテキストがある場合、それらの 7 つのスペース文字は単一のスペースに正規化されます。同様に、テキスト、改行文字、およびその他のテキストがある場合、その改行文字は単一のスペースに正規化されます。

これは望ましくないと思うかもしれませんが、返品が黙って削除された場合、少なくとも同じくらい多くの奇妙な状況が発生します.

これらのリターンを防ぐことはできず、入力要素間にスペースができますが、動的に追加された各入力要素の後にスペースを動的に挿入することはできます。そうすれば、すべての入力、「ハードコードされた」もの、およびスクリプトを介して追加したものの間にスペースができます。

コードをきれいに見せようとせずに:

var addElements = document.getElementById("ingredient_" + ingredientCount);
addElements.appendChild(Quantity);
addElements.appendChild(document.createTextNode(" "));
addElements.appendChild(Unit);
addElements.appendChild(document.createTextNode(" "));
addElements.appendChild(Type);

それ（またはそれらの行に沿ったもの）は、ハードコードされたものと同じように動的入力を配置する必要があります。

于 2012-08-01T14:29:18.263 に答える
1

ブラウザーは空白の折りたたみを行います。1 つまたは複数の空白文字 (空白、タブ、改行) が 1 つのスペースに折りたたまれます。

これを回避する方法がわかりません。font-size を 0 に設定できますか? または、JS にスペース文字を追加します。また、入力フィールドを左側 ( span > input { float:left; }) にフローティングさせてみることもできます。これは、span 要素のテキスト コンテンツではなく、入力フィールドのみをフローティングします。

于 2012-08-01T14:26:22.333 に答える
0

改行、タブのインデント、複数のスペースなど、HTML タグ間の任意の量の空白は、レンダリング時に正確に 1 つのスペースとして扱われます。これは HTML の基本です。HTML を出力する作業をしている場合は、これを認識し、HTML を生成するコードで適切に処理する必要があります。

于 2012-08-01T14:28:59.230 に答える
0

別の質問で述べたように、これは私が知っている唯一の解決策です*：

<span><!--
    --><input><!--
    --><input><!--
    --><input><!--
--></span><br>

※まあ、それを解決と言うなら…

于 2012-12-15T19:10:41.310 に答える