待办事项列表清理输入 jQuery | heading

heading

关注(28)粉丝(399)

待办事项列表清理输入 jQuery

本文介绍了待办事项列表清理输入 jQuery的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

var todoList = [];$("#add").on("click", function() {var todoItem = $("#todoInput").val();如果 (!todoItem.trim()) {alert("请输入待办事项");} 别的 {todoList.push(todoItem);//点击时清空输入框$("#todoInput").val("");//为每个数组项添加一个标记完成按钮//发布数组var addedTodo = todoList[todoList.length - 1];控制台日志(已添加Todo)；$(".todoContainer").附加('<li class="eachItem">'+'<p class="todoItemStyle">'+ 添加待办事项 +'</p><button class="sm-btn" id="deleteButton">删除</button><button class="sm-btn" id="completeButton">完成</button></li>').addClass("todoStyle");}});//添加按钮完成所有项目$("#completeAll").on("click", function() {$(".todoItemStyle").toggleClass("完成");});//添加按钮以重新启动列表$("#newList").on("click", function() {todoList = [];$(".todoContainer").html("");});//按钮删除待办事项$("body").on("click", "#deleteButton", function() {$(this).parent().remove();console.log("删除按钮被按下");});//按钮完成一个todo$("body").on("click", "#completeButton", function() {$(this).siblings(".todoItemStyle").toggleClass("已完成");console.log("完成点击");});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="主容器"><div class="所有容器"><h1>我的列表 </h1><div class="buttons"><button id="newList" class="global-buttons">新建列表</button><button id="completeAll" class="global-buttons">完成所有

<div class="容器列表"><标签>输入您的待办事项</label><input type="text" id="todoInput" placeholder="在这里输入你要做的事情" name="todo"><button id="add" class="global-buttons">添加到列表 </button>

感谢您的关注.CodePen

解决方案

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

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

var todoList = [];$("#add").on("click", function() {var todoItem = $("#todoInput").val().replace(/(<([^>]+)>)/ig,"");如果 (!todoItem.trim()) {alert("请输入待办事项");} 别的 {todoList.push(todoItem);//点击时清空输入框$("#todoInput").val("");//为每个数组项添加一个标记完成按钮//发布数组var addedTodo = todoList[todoList.length - 1];控制台日志(已添加Todo)；$(".todoContainer").附加('<li class="eachItem">'+'<p class="todoItemStyle">'+ 添加待办事项 +'</p><button class="sm-btn" id="deleteButton">删除</button><button class="sm-btn" id="completeButton">完成</button></li>').addClass("todoStyle");}});//添加按钮完成所有项目$("#completeAll").on("click", function() {$(".todoItemStyle").toggleClass("完成");});//添加按钮以重新启动列表$("#newList").on("click", function() {todoList = [];$(".todoContainer").html("");});//按钮删除待办事项$("body").on("click", "#deleteButton", function() {$(this).parent().remove();console.log("删除按钮被按下");});//按钮完成一个todo$("body").on("click", "#completeButton", function() {$(this).siblings(".todoItemStyle").toggleClass("已完成");console.log("完成点击");});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="主容器"><div class="所有容器"><h1>我的列表 </h1><div class="buttons"><button id="newList" class="global-buttons">新建列表</button><button id="completeAll" class="global-buttons">完成所有

<div class="容器列表"><标签>输入您的待办事项</label><input type="text" id="todoInput" placeholder="在这里输入你要做的事情" name="todo"><button id="add" class="global-buttons">添加到列表 </button>

I am working on a simple to do app. Everything works, except, if the user inputs an html element into the input, then it gets rendered as html. So, for instance if the input is h1 heading /h1 , I get the word "heading" with default h1 styling.I have been googling for 2 hours now, and would really just like to finish this app.this is the code.

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>

Thank you for looking.CodePen

解决方案

You can strip all html tags on input with a regex pattern:

$("#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>

这篇关于待办事项列表清理输入 jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-11 22:19