在动态创建的输入上查找字符

Question

我正在尝试创建一个名单。截至目前，我的代码一次可以添加一个名称。我想确定输入中是否有逗号（，），所以我可以添加第二个或第三个名称并创建个人<li>，如何识别输入是否具有特定字符？

var button;
var list = document.getElementById("greatList");
var item = document.getElementById("addItems").value;
//console.log(item);

document.addEventListener('DOMContentLoaded', init);

function init(){
	 button = document.getElementById('addButton');
	

	document.querySelector('#addButton').addEventListener(addField);
	//button.addEventListener('click', getItem)

}

function addField(){
	var item = document.getElementById("addItems").value;
	var newField = document.createElement('li');
	newField.appendChild(document.createTextNode(item));
	list.appendChild(newField);
	
}

function extraInput(){
	var item = document.getElementById("addItems").value;
	if (item.search(',') !== -1){
		console.log(true);
	}
}

<div class="wrapper">
	<div class="list">
		<h2>List: </h2>
		<section class="top">

			<input type="text"  multiple="multiple" id="addItems">
			<button type="submit" id="addButton" onclick="addField()">Add</button>
			<button>Get Random</button>
		</section>
		<hr>
		<section class="result">
			<ul id="greatList">
				<li class="singleLine">Hello</li>
			</ul>
		</section>
	</div>
</div>

Answer 1

您可以使用string.split功能。下面的工作代码。

＆＃13;

＆＃13;

var button;
var list = document.getElementById("greatList");
var item = document.getElementById("addItems").value;
//console.log(item);
document.addEventListener('DOMContentLoaded', init);

function init() {
  button = document.getElementById('addButton');
  document.querySelector('#addButton').addEventListener(addField);
  //button.addEventListener('click', getItem)

}

function addField() {
  var item = document.getElementById("addItems").value;
  if (item == "") {
    alert("enter something");
    return false;
  }
  var items = item.split(',');
  for (i = 0; i < items.length; i++) {
    var newField = document.createElement('li');
    newField.appendChild(document.createTextNode(items[i]));
    list.appendChild(newField);
  }
}

function extraInput() {
  var item = document.getElementById("addItems").value;
  if (item.search(',') !== -1) {
    console.log(true);
  }
}

＆＃13;

<div class="wrapper">
  <div class="list">
    <h2>List: </h2>
    <section class="top">

      <input type="text" multiple="multiple" id="addItems">
      <button type="submit" id="addButton" onclick="addField()">Add</button>
      <button>Get Random</button>
    </section>
    <hr>
    <section class="result">
      <ul id="greatList">
        <li class="singleLine">Hello</li>
      </ul>
    </section>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

更新：我没知道f5知道它已经回答了。只是忽略它。

var button;
var list = document.getElementById("greatList");
var item = document.getElementById("addItems").value;
//console.log(item);

document.addEventListener('DOMContentLoaded', init);

function init(){
	 button = document.getElementById('addButton');
	

	document.querySelector('#addButton').addEventListener(addField);
	//button.addEventListener('click', getItem)

}

function addField(){
    	var item = document.getElementById("addItems").value;
if(isValid(item )){
var itemArr = item.split(",");
for (var i = 0; i < itemArr.length; i++) {
  element = itemArr[i];
 var newField = document.createElement('li');
    	newField.appendChild(document.createTextNode(element ));
    	list.appendChild(newField);
}
        	
    	}
else{alert('invalid text!');}
    }
function isValid(str){
 return !/[~`!#$%\^&*+=\-\[\]\\';/{}|\\":<>\?]/g.test(str);
}
function extraInput(){
	var item = document.getElementById("addItems").value;
	if (item.search(',') !== -1){
		console.log(true);
	}
}

<div class="wrapper">
	<div class="list">
		<h2>List: </h2>
		<section class="top">

			<input type="text"  multiple="multiple" id="addItems">
			<button type="submit" id="addButton" onclick="addField()">Add</button>
			<button>Get Random</button>
		</section>
		<hr>
		<section class="result">
			<ul id="greatList">
				<li class="singleLine">Hello</li>
			</ul>
		</section>
	</div>
</div>

Answer 3

尝试改进你的函数addField

＆＃13;

＆＃13;

function addField(){
    var item = document.getElementById("addItems").value; //Get the string
    var res = item.split(","); //split the string and create an array
    res.forEach(function (value) { createField(value); }); //for each element in the array call to createField
    
	
}
function createField(text){
	var list = document.getElementById("greatList"); // use local variable, not global
	var newField = document.createElement('li');
	newField.appendChild(document.createTextNode(text));
	list.appendChild(newField);
}

＆＃13;

<div class="wrapper">
	<div class="list">
		<h2>List: </h2>
		<section class="top">

			<input type="text"  multiple="multiple" id="addItems">
			<button type="submit" id="addButton" onclick="addField()">Add</button>
			<button>Get Random</button>
		</section>
		<hr>
		<section class="result">
			<ul id="greatList">
				<li class="singleLine">Hello</li>
			</ul>
		</section>
	</div>
</div>

＆＃13;

＆＃13;

＆＃13;