input模拟回车生成标签

Question

问题描述

百家号，敲击键盘回车，会自动生成标签。现在想通过模拟回车的方式自动生成标签，但是模拟回车执行了却没有达到生成标签的效果

问题出现的环境背景及自己尝试过哪些方法

循环数据，模拟回车

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
var arr = ['标签1','标签2','标签3','标签4']

    var len = arr.length;
    $('.tags-container').keyup(function(event){
      if(event.keyCode ==13){
          console.log('执行模拟回车')
      }
    });
    $('.remind').click(function(){
        $(".tags-container").addClass('focus');
        for(var n = 0;n<arr.length;n++){

// console.log(arr[n]);

            var val = $('.tags-container input').val();
            console.log(val);
            $('.tags-container input').focus();
            $('.tags-container input').val(arr[n]);
            var e = jQuery.Event("keydown");//模拟一个键盘事件
               e.keyCode = 13;//keyCode=13是回车
              $(".tags-container").trigger(e);//模拟按下回车
        }
    })

你期待的结果是什么？实际看到的错误信息又是什么？

想达到的效果：
这是用实际的回车键敲出来的

Answer 1

<ul id="content"></ul>
    <div class="clearData">清空</div>
    <textarea onkeypress="func()" class="inputVal" oninput="inputFunc(this)"></textarea>
    <div onclick="sunmitFunc()">提交</div>

js:
var sendData=[]; // 要发送的数据

function func(event){ //回车添加标签
    event = event || window.event;
    if(event.keyCode==13){
        event.preventDefault();
        var val=$(".inputVal").val().replace(/(^\s*)|(\s*$)/g,"")
        if($(".inputVal").val()&&val!=""){
            $("#content").append("<li class='selectVal'>"+$('.inputVal').val()+"<span class='deleteLabel'>×</span></li>");
            sendData.push($(".inputVal").val());
            $(".inputVal").val("");
        }
    }
}
$(".clearData").click(function(){ // 清空所有添加的标签
    $("#content").html("");
    $(".inputVal").val("");
    sendData=[];
})
$(document).on("click",".deleteLabel",function(){ // 单个标签的删除
    $(this).parent().hide();
    sendData.splice($(this).parent().index(),1,"");
})
function sunmitFunc(){ //提交
    var newArr=[];
    for(var i=0;i<sendData.length;i++){
        if(sendData[i]!=""){
            newArr.push(sendData[i]);
        }
    }
    console.log(newArr);//提交时
} 

要是用了现在的框架，就不用这么操作DOM了