php - 传单标记弹出文本中的换行符

Question

我有一个表单可以将一些文本与传单 map 上的标记相关联:

<form action="map.php" method="POST">
 <section>
  <label>write some text here</label>
   <textarea id="text" rows="3" name="area"></textarea>
 </section>

 <input type="submit" value="show map" />
</form>

正如您在上面看到的，textarea 的内容被传递到页面 map.php，其中显示了一个 map 。
在 map 上，显示了位置标记，弹出窗口包含通过 textarea 发布的文本(变量 $text ):

<?php
$text = htmlspecialchars($_POST["text"]);
?>

<center>
 <div id="map" class="embed-container"></div>
</center>

<script>
  var map = L.map('map').setView([46.13, 11.11], 9);
  L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    {
      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
      maxZoom: 17,
      minZoom: 9
    }).addTo(map);
</script>
<script>
  var icon = L.icon({
        iconUrl: 'img/gps.png',
        iconSize: [25, 25],
        });
  var marker = L.marker(['<?=$latitude;?>', '<?=$longitude;?>'], {icon: icon}).addTo(map);
  marker.bindPopup('<?=$text;?>');
</script>

问题是，如果我按 输入 当我在 textarea 中写一些东西时，没有任何东西传递给弹出标记。
我试过 \n 等等，但没有任何效果。它们在弹出文本中显示为字符串，而不是换行符。

有任何想法吗？

Answer 1

The problem is that if I press ENTER while I write something in the textarea, nothing is passed to the popup marker.

这是不准确的。弹出窗口中的 HTML 正在接收换行符。

问题是换行符显示为折叠的空白。这是 HTML 中的默认设置。让我引用 documentation for the white-space CSS property , 所有 HTML 元素默认继承:

normal

• Sequences of whitespace are collapsed. Newline characters in the source are handled as other whitespace. Breaks lines as necessary to fill line boxes.

HTML 折叠空白字符，包括制表符和换行符(但不包括   s)。



Leaflet 弹出窗口中的文本遵循相同的规则。 用 HTML <br> line breaks 替换换行符 ，或以其他方式将每一行都包裹在 block-level element 中像 <div> .



如果您正在使用 php ，最简单的方法是使用 nl2br function .这不一定是最好的方法，因为它是 非常容易让没有经验的开发人员进行 XSS 攻击。 Using htmlspecialchars 如果您要输出用引号括起来的 JavaScript 字符串，将无济于事。对于这些情况，我建议使用 json_encode 提供引号和引号转义，即 var foo = <?= json_encode(nl2br(str)); ?>;