wrap - textarea

Question

Siemano, mógłby ktoś podać różnice między wrapem "soft" a wrapem "hard"? Prosiłbym o przykłady (najlepiej jakby ktoś wysłał w komentarzu, a nie link do innej strony).

Answer 1

Dla porządku podam "regułkę" :

Syntax

<textarea wrap="soft|hard">

Attribute Values

Value	Description
soft	The text in the textarea is not wrapped when submitted in a form. This is default
hard	The text in the textarea is wrapped (contains newlines) when submitted in a form. When "hard" is used, the cols attribute must be specified

Mam nadzieję, że ten "prosty" skrypt w php posłuży za najlepszy sposób wytłumaczenia.  lub w javascript (CodePen)

test_textarea_wrap_attrib.php  http://localhost/test_textarea_wrap_attrib.php

<?php

 if ($_SERVER["REQUEST_METHOD"] == "POST") {
   $wrap_soft = $_REQUEST['wrap-soft-area'];
   $wrap_hard = $_REQUEST['wrap-hard-area'];
   $wrap_hard_area_point = $_REQUEST['wrap-hard-area-point'];
 } else {
   $wrap_soft = "";
   $wrap_hard = "";
   $wrap_hard_area_point = "20";
 }

?>
<style>
  #wrap-hard-area-point-label { color: red; }
</style>
<label for="wrap-soft">Soft wrap for $_POST['wrap-soft-area']</label>
<pre id="wrap-soft"><?php echo $wrap_soft; ?></pre>
<br>
<label for="wrap-hard">Hard wrap for $_POST['wrap-hard-area'] with <b>cols</b> attrib set on <?php echo $wrap_hard_area_point; ?></label>
<pre id="wrap-hard"><?php echo $wrap_hard; ?></pre>
<br>
<form method="post" action="test_textarea_wrap_attrib.php">
  <label for="wrap-soft-area">Soft wrap</label><br>
  <textarea id="wrap-soft-area" name="wrap-soft-area" wrap="soft">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse imperdiet ut massa a consequat. Praesent eget venenatis nulla.
  </textarea>
  <br><br>
  <label for="wrap-hard-area">Hard wrap &lt;textarea wrap=&quot;hard&quot; cols=&quot;<span id="wrap-hard-area-point-label"><?php echo $wrap_hard_area_point; ?></span>&quot;&gt;</label><br>
  <textarea id="wrap-hard-area" name="wrap-hard-area" wrap="hard" cols="<?php echo $wrap_hard_area_point; ?>">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse imperdiet ut massa a consequat. Praesent eget venenatis nulla.
  </textarea>
  <br><br>
  <label for="wrap-hard-area-point">Hard wrap point (cols) : </label>
  <input id="wrap-hard-area-point" name="wrap-hard-area-point" value="">
  <br><br>
  <button type="submit">Enter</button>
</form>
<script>
  const wrap_hard_area = document.getElementById("wrap-hard-area");
  const wrap_hard_area_point_label = document.getElementById("wrap-hard-area-point-label"); 
  const wrap_hard_area_point = document.getElementById("wrap-hard-area-point");
  let wrap_hard_area_mouse_down = false;
  wrap_hard_area_point.value = wrap_hard_area.cols;

  wrap_hard_area.addEventListener("mousemove", () => {
    if (wrap_hard_area_mouse_down) {
      const width_css = getComputedStyle(wrap_hard_area).width.replace("px","");
      const width_to_cols = (width_css / 10 < 2) ? '1': width_css / 10;
      wrap_hard_area_point.value = Math.floor(width_to_cols);
      wrap_hard_area.setAttribute("cols",wrap_hard_area_point.value);
      wrap_hard_area_point_label.textContent = wrap_hard_area_point.value;
    }
  });

  wrap_hard_area.addEventListener("mousedown", () => {
    wrap_hard_area_mouse_down = true;
  });

  wrap_hard_area.addEventListener("mouseup", () => {
    wrap_hard_area_mouse_down = false;
  });

  wrap_hard_area_point.addEventListener("input", () => {
    wrap_hard_area.cols = wrap_hard_area_point.value;
    wrap_hard_area_point_label.textContent = wrap_hard_area_point.value;
  });
</script>

Zmieniając wartość cols i po kliknięciu Enter zobaczysz wynik.

 

P.S. Ustaw tak cols ... 

Comments

Dzięki za dobre wytłumaczenie.