Question

我做了一些谷歌搜索，发现这可能需要使用部分视图和JavaScript。但是在我进一步挖掘之前想要得到一些建议。

我想要达到的目标是：在文本框中输入一些文本，按下按钮，页面不会刷新（使用JavaScript），在文本框上方或下方的某处显示刚刚键入的文本（尚未保存在数据库中），以及删除任何添加项目的功能（可能在每个文本后面都有ax按钮，当点击从页面中删除那段文本时，就像在stackoverflow中删除标记一样）。

谢谢。

Answer 1

这是一个开始。也许别人可以完成它。我得走了

var paragraphInput = document.querySelector('#paragraphInput');
var tagsHere = document.querySelector('#tagsHere');
document.querySelector('#breakBtn').addEventListener('click',function(){

  var words = paragraphInput.value.split(" ");
  console.log(words);
  
  for( var i = words.length; i>=0; i--){
    if( words[i] != undefined ){
  
      var newspan = document.createElement("span");
      newspan.classList = "post-tag";
      newspan.innerHTML = words[i] + "<span class='delete-tag'></span>";
      tagsHere.appendChild(newspan)
      }
  }
});

html, body {
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    font-size: 13px;
    line-height: 1.26666667;
    color: #242729;
}
.tag-editor {
    border: 1px solid #c8ccd0;
    cursor: text;
    background-color: #FFF;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}

div, span{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
.post-tag {
    
    position: relative;
    display: inline-block;
    padding: .4em .5em;
    margin: 2px 2px 2px 0;
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    text-align: center;
    border-width: 1px;
    border-style: solid;
    border-radius: 0;
    transition: all .15s ease-in-out;
    color: #39739d;
    background-color: #E1ECF4;
    border-color: transparent;
}

.delete-tag {
    width: 14px;
    height: 14px;
    vertical-align: middle;
    display: inline-block;
    background-position: -40px -319px;
    cursor: pointer;
    margin-left: 3px;
    margin-top: -2px;
    margin-bottom: -1px;
    background-image: url(https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.png?v=0786b22b9381);
    background-image: url(https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg?v=1b3cdae197be),none;
    background-size: initial;
    background-repeat: no-repeat;
    overflow: hidden;
}

<textarea id="paragraphInput"></textarea>
<input id="breakBtn" type="button" value="break" ></input>

<br><br>

<div class="tag-editor">


<span id="tagsHere">

<span class="post-tag rendered-element">javascript<span class="delete-tag" title="remove this tag"></span></span>

<span class="post-tag rendered-element">asp.net-core-mvc<span class="delete-tag" title="remove this tag"></span></span>

<span class="post-tag rendered-element">asp.net-mvc-partialview<span class="delete-tag" title="remove this tag"></span></span>

</span>

</div>

Answer 2

找到一个使用JQuery插件tokenInput的帖子，几乎可以完成我需要的一切（仍然可以找出样式部分）。此示例适用于.net用户： https://medium.com/yasser-shaikh/using-jquery-tokeninput-with-asp-net-mvc-3-razor-f80c2d68e994

Answer 3

你可以用直接的HTML和jQuery完成你提到的所有事情。

https://codepen.io/anon/pen/mXVxXJ

$(document).ready(function() {
  $('#listSection').on('click', '.itemDelete', function() {
    $(this).closest('li').remove();
  });
});


  function addItem() {
    var text = $('#txtVal').val(); 
    $('#listSection ul').append("<li class='list-group-item'>" + text + "<a href='#' title='Remove Item' class='itemDelete'> X</a></li>");
    $('#txtVal').val('');
  };

<head>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>
  <div class="container">
    <h3>Dynamic List Example</h3>
    <hr/>
    <div class="row">
      <div class="col-md-4">
        <label>Enter Text</label>
        <input id="txtVal" type='text' class="form-control"></input><br/>
        <button id="AddButton" onClick="addItem()" class="btn btn-primary">Add to list</button>
      </div>
    </div>
    <br/>
    <label>My List</label>
    <div class="row">
      <div class="col-md-2">
        <div id="listSection">
          <ul class="list-group">
          </ul>
        </div>
      </div>
    </div>
  </div>
</body>
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

将新项添加到列表/部分视图而不重新加载页面？

3 个答案: