待办事项列表清理输入 jQuery

Question

我正在开发一个简单易用的应用程序。一切正常，除非用户在输入中输入 html 元素，然后它会呈现为 html。因此，例如，如果输入是 h1 heading /h1 ，我会得到带有默认 h1 样式的单词 "heading" 。我已经在谷歌上搜索了 2 个小时，真的很想完成这个应用程序。这是代码。

var todoList = [];

$("#add").on("click", function() {
  var todoItem = $("#todoInput").val();
  if (!todoItem.trim()) {
    alert("please enter a to do");
  } else {
    todoList.push(todoItem);

    //empty the input field on click
    $("#todoInput").val("");

    //add a mark complete button to every array item
    //publish array
    var addedTodo = todoList[todoList.length - 1];
    console.log(addedTodo);
    $(".todoContainer")
      .append(
        '<li class="eachItem">' +
        '<p class="todoItemStyle">' + addedTodo +
        '</p><button class="sm-btn" id="deleteButton"> delete </button> <button class="sm-btn"  id="completeButton"> complete </button></li>'
      )
      .addClass("todoStyle");
  }
});

//add button to complete all items
$("#completeAll").on("click", function() {
  $(".todoItemStyle").toggleClass("completed");
});

//add button to restart list
$("#newList").on("click", function() {
  todoList = [];
  $(".todoContainer").html("");
});

//button to remove a todo
$("body").on("click", "#deleteButton", function() {
  $(this).parent().remove();
  console.log("delete button pressed");
});

//button to complete a todo
$("body").on("click", "#completeButton", function() {
  $(this).siblings(".todoItemStyle").toggleClass("completed");
  console.log("completed clicked");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main container">
  <div class="all container">
    <h1> My List </h1>
    <div class="buttons">
      <button id="newList" class="global-buttons"> New List </button>
      <button id="completeAll" class="global-buttons"> Complete All</button>
    </div>
    <div class="container list">
      <label> Input your to do </label>
      <input type="text" id="todoInput" placeholder="Input your to do here" name="todo">
      <button id="add" class="global-buttons"> Add to list </button>
      <ul class="todoContainer">
      </ul>
    </div>
  </div>
</div>

感谢您的观看。 CodePen

Answer 1

您可以使用 regex 模式去除 input 上的所有 html 标签：

$("#todoInput").val().replace(/(<([^>]+)>)/ig,"");

var todoList = [];

$("#add").on("click", function() {
  var todoItem = $("#todoInput").val().replace(/(<([^>]+)>)/ig,"");
  if (!todoItem.trim()) {
    alert("please enter a to do");
  } else {
    todoList.push(todoItem);

    //empty the input field on click
    $("#todoInput").val("");

    //add a mark complete button to every array item
    //publish array
    var addedTodo = todoList[todoList.length - 1];
    console.log(addedTodo);
    $(".todoContainer")
      .append(
        '<li class="eachItem">' +
        '<p class="todoItemStyle">' + addedTodo +
        '</p><button class="sm-btn" id="deleteButton"> delete </button> <button class="sm-btn"  id="completeButton"> complete </button></li>'
      )
      .addClass("todoStyle");
  }
});

//add button to complete all items
$("#completeAll").on("click", function() {
  $(".todoItemStyle").toggleClass("completed");
});

//add button to restart list
$("#newList").on("click", function() {
  todoList = [];
  $(".todoContainer").html("");
});

//button to remove a todo
$("body").on("click", "#deleteButton", function() {
  $(this).parent().remove();
  console.log("delete button pressed");
});

//button to complete a todo
$("body").on("click", "#completeButton", function() {
  $(this).siblings(".todoItemStyle").toggleClass("completed");
  console.log("completed clicked");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main container">
  <div class="all container">
    <h1> My List </h1>
    <div class="buttons">
      <button id="newList" class="global-buttons"> New List </button>
      <button id="completeAll" class="global-buttons"> Complete All</button>
    </div>
    <div class="container list">
      <label> Input your to do </label>
      <input type="text" id="todoInput" placeholder="Input your to do here" name="todo">
      <button id="add" class="global-buttons"> Add to list </button>
      <ul class="todoContainer">
      </ul>
    </div>
  </div>
</div>

Answer 2

您还可以创建一个模板并通过 .text() 方法放置值。

var todoList = [];



$("#add").on("click", function() {
  var todoItem = $("#todoInput").val();
  if (!todoItem.trim()) {
    alert("please enter a to do");
  } else {
    todoList.push(todoItem);

    //empty the input field on click
    $("#todoInput").val("");
    
    //add a mark complete button to every array item
    //publish array
    var addedTodo = todoList[todoList.length - 1];
    console.log(addedTodo);
      
    var template = $('#todo-template').html();
    $(template).appendTo('.todoContainer').find('.todoItemStyle').text(addedTodo).addClass("todoStyle");
    
  }
});

//add button to complete all items
$("#completeAll").on("click", function() {
  $(".todoItemStyle").toggleClass("completed");
});

//add button to restart list
$("#newList").on("click", function() {
  todoList = [];
  $(".todoContainer").html("");
});

//button to remove a todo
$("body").on("click", "#deleteButton", function() {
  $(this).parent().remove();
  console.log("delete button pressed");
});

//button to complete a todo
$("body").on("click", "#completeButton", function() {
  $(this).siblings(".todoItemStyle").toggleClass("completed");
  console.log("completed clicked");
});

<div class="main container">
  <div class="all container">
    <h1> My List </h1>
    <div class="buttons">
    <button id="newList" class="global-buttons"> New List </button>
    <button id="completeAll" class="global-buttons"> Complete All</button>
      </div>
    <div class="container list">
      <label> Input your to do </label>
      <input type="text" id="todoInput" placeholder="Input your to do here" name="todo" > 
      <button id="add" class="global-buttons"> Add to list </button>
      <ul  class="todoContainer">
      </ul>
    </div>
  </div>
</div>

<script type="template/text" id="todo-template">
  <li class="eachItem"> 
    <p class="todoItemStyle"></p>
    <button class="sm-btn" id="deleteButton"> delete </button>
    <button class="sm-btn" id="completeButton"> complete </button>
  </li>
</script>

待办事项列表清理输入 jQuery

Todo List Sanitizing Input jQuery

jquery

rendering

input

html-sanitizing