javascript - 通过javascript从表单中读取格式化文本

问题描述

class Storedata {
  constructor(name, desc, price, qty) {
    this.name = name;
    this.desc = desc;
    this.price = price;
    this.qty = qty;
  }
}

var arr = [];
var btnform = document.getElementById('clicktoadd');
var btnlist = document.getElementById('clicktoshow');
var rem = document.getElementById('main');
var cancelform;
var submit;

function addData() {
  var proname = document.getElementById("inpname");
  var prodesc = document.getElementById("inpdesc");
  var propric = document.getElementById("inpprice");
  var proqty = document.getElementById("inpqty");
  arr.push(new Storedata(proname.value, prodesc.value, propric.value, proqty.value));
}

function showlist() {
  var data = document.createElement('table');
  data.setAttribute("id", "data");
  data.innerHTML += "<tr><th>Product Name</th><th>Description</th><th>Price</th><th>Quantity</th><th></th></tr>";
  for (let i = 0; i < arr.length; i++) {
    data.innerHTML += ("<tr><td>" + arr[i].name + "</td><td>" + arr[i].desc + "</td><td>" + arr[i].price + "</td><td>" + arr[i].qty + "</td><td><button id=\"delete" + i + "\">Delete</button></tr>");
  };
  document.getElementById('listing').appendChild(data);
  document.getElementById('showbutton').removeAttribute("hidden", false);
}

function removelist() {
  var data = document.getElementById("data");
  data.parentNode.removeChild(data);
}

function addformtopage() {
  var form = document.createElement('div');
  form.setAttribute("id", "remform");
  form.innerHTML += "<div id=\"lblname\">Product Name:</div><input id=\"inpname\" type=\"text\"><div id=\"chkname\" hidden=\"true\">Enter a Product Name</div><div id=\"lbldesc\">Description:</div><textarea id=\"inpdesc\" rows=\"10\" cols=\"35\"></textarea><div id=\"chkdesc\" hidden=\"true\">Enter a Product Desciption</div><div id=\"lblprice\">Price in INR:</div><input id=\"inpprice\" type=\"number\"><div id=\"chkprice\" hidden=\"true\">Enter a Product Price</div><div id=\"lblqty\">Quantity:</div><input id=\"inpqty\" type=\"number\"><div id=\"chkqty\" hidden=\"true\">Enter a Product Quantity</div><br><br><button id=\"submitproduct\">Submit</button><button id=\"cancel\">Cancel</button>";
  document.getElementById('panel').appendChild(form);
  cancelform = document.getElementById('cancel');
  submit = document.getElementById('submitproduct');

}

function validateform() {
  var proname = document.getElementById("inpname");
  var prodesc = document.getElementById("inpdesc");
  var propric = document.getElementById("inpprice");
  var proqty = document.getElementById("inpqty");
  var errname = document.getElementById("chkname");
  var errdesc = document.getElementById("chkdesc");
  var errpric = document.getElementById("chkprice");
  var errqty = document.getElementById("chkqty");
  if ((proname.value) && (prodesc.value) && (propric.value) && (proqty.value)) {
    errname.setAttribute("hidden", true);
    errdesc.setAttribute("hidden", true);
    errpric.setAttribute("hidden", true);
    errqty.setAttribute("hidden", true);
    return true;
  }
  if (proname.value) {
    errname.setAttribute("hidden", true);
  }
  if (prodesc.value) {
    errdesc.setAttribute("hidden", true);
  }
  if (propric.value) {
    errpric.setAttribute("hidden", true);
  }
  if (proqty.value) {
    errqty.setAttribute("hidden", true);
  }

  if (!proname.value) {
    errname.removeAttribute("hidden", false);
  }
  if (!prodesc.value) {
    errdesc.removeAttribute("hidden", false);
  }
  if (!propric.value) {
    errpric.removeAttribute("hidden", false);
  }
  if (!proqty.value) {
    errqty.removeAttribute("hidden", false);
  }
  return false;
}

function clearform() {
  var proname = document.getElementById("inpname");
  var prodesc = document.getElementById("inpdesc");
  var propric = document.getElementById("inpprice");
  var proqty = document.getElementById("inpqty");
  proname.value = null;
  prodesc.value = null;
  propric.value = null;
  proqty.value = null;
}

function removeform() {
  var elem = document.getElementById("remform");
  elem.parentNode.removeChild(elem);
}

function removebuttons() {
  rem.setAttribute("hidden", true);
}

function showbuttons() {
  rem.removeAttribute("hidden", false);
}

btnform.addEventListener('click', function() {
  addformtopage();
  removebuttons();
  cancelform.addEventListener('click', function() {
    showbuttons();
    removeform();
  });
  submit.addEventListener('click', function() {
    if (validateform()) {
      alert("Values Added");
      addData();
      clearform();
    }
  });
});

btnlist.addEventListener('click', function() {
  showlist();
  removebuttons();
  document.getElementById('showbutton').addEventListener('click', function() {
    showbuttons();
    removelist();
    document.getElementById('showbutton').setAttribute("hidden", "true");
  });
});

#chkname,
#chkdesc,
#chkprice,
#chkqty {
  color: red;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 70%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

<!DOCTYPE HTML>
<html>

<head>
  <link href="style.css" rel="stylesheet" />
  <title>
    JS Form
  </title>
</head>

<body>
  <div id="main">
    <p><button id="clicktoadd">Add Product</button> <button id="clicktoshow">Show List</button></p>
  </div>
  <div id="panel">

  </div>
  <div id="listing">

  </div>
  <button id="showbutton" hidden="true">< Back</button>
  <script src="script.js"></script>
</body>

</html>

我想以格式化文本形式将项目描述为输入。然后以与输入相同的格式输出它，但现在我得到的文本由空格分隔，
应该在那里。请帮忙..

执行步骤 1. 运行此代码片段。2. 点击“添加产品”按钮。3. 填写表格（为了测试给出多于一行的描述）并提交。4. 点击“取消”按钮返回。5. 单击“显示列表”按钮。6. 观察描述栏。

这是我用空格分隔的输出这是我提供的表单输入

标签： javascripthtml

好吧，你有两个选择。添加<pre>标签：

for (let i = 0; i < arr.length; i++) {
    data.innerHTML += ("<tr><td>" + arr[i].name + "</td><td><pre>" + arr[i].desc + "</pre></td><td>" + arr[i].price + "</td><td>" + arr[i].qty + "</td><td><button id=\"delete" + i + "\">Delete</button></tr>");
  };

这样它将显示新行并保持字符串干净。

或者您可以用这种方式替换新行<br>：

for (let i = 0; i < arr.length; i++) {
    data.innerHTML += ("<tr><td>" + arr[i].name + "</td><td>" + arr[i].desc.replace(/\n/g, "<br>") + "</td><td>" + arr[i].price + "</td><td>" + arr[i].qty + "</td><td><button id=\"delete" + i + "\">Delete</button></tr>");
  };

请记住，默认情况下 HTML 中不显示新行，如果您想要一个新行，请放置一个<br>

在线测试

希望能帮助到你！:)

javascript - 通过javascript从表单中读取格式化文本

问题描述

解决方案

推荐阅读