Question

我试图做一个“待办事项列表”，只是为了看看到目前为止我学到了什么，而我所坚持的是将事件侦听器添加到“待办事项”列表的第一个输入中，因此当有人按下Enter键时，它会创建一个新的Input，它将自动切换为Input，以便您可以开始编写其他任务。

一切都很好，但是到了大的问题，正如您可能已经猜到的那样，当我尝试在新创建的输入上实际按回车键时，什么都没有发生。

我尝试使用querySelectorAll()，但无法解决问题。我告诉我的一个朋友，不要只是为了实际做就告诉我怎么做，但是由于我目前正在学习，所以我宁愿理解为什么这样做。

起始HTML文件如下所示

<body>
    <div class="to-do-wrapper">
        <ul class="list">
            <li id="new-list"> <i class="fas fa-check" id="checkmark" style="display: none;"></i> <input type="text" placeholder="Add a new Item" class="input-new-list"></input> <i class="fas fa-times" id="remove" style="display: none;"></i></li>
        </ul>
    </div>
    <script src="app.js"></script>
</body>

let counter = 1;

document.querySelector('.input-new-list').addEventListener("keypress", function(e){
    let key = e.keyCode;
    let list = document.querySelector('.list');
    let newRow = document.createElement("li");
    let addInput = document.createElement('input');
    addInput.setAttribute('id', 'current-' + counter);
    addInput.setAttribute('class', 'input-new-list');
    addInput.setAttribute('type', 'text');
    newRow.setAttribute('id', 'new-list');
    // On press Return, new list
    if (key === 13) {
        list.appendChild(newRow);
        newRow.appendChild(addInput);
        document.getElementById('current-' + counter).focus();
        counter++;
    }
});

如上所述，我希望能够在创建的任何输入上按回车（Enter）键，以便能够创建另一个输入，使用getElementById将其集中在该输入上和.focus()。我知道这可能不是编写此代码的最佳方法，但是我只用JS就可以了。

Answer 1

我进行了很多更改，但实际上非常相似。我有：

使用事件监听器告诉我们文档何时完成加载
寻找输入元素并添加事件监听器
优先于event.keyCode==13丢掉可怕的event.key=='Enter'
根据默认输入类型为文本输入这一事实
使用classList接口而不是.setAttribute('class', xxx方法
完全丢弃了计数器。它对我没有任何用处-我不需要它来关注新输入或从其余信息中收集信息。没必要。

这是一个工作示例：

"use strict";
function byId(id){return document.getElementById(id)}
function qsa(sel,par=document){return par.querySelectorAll(sel)}
function newEl(tag){return document.createElement(tag)}

window.addEventListener('load', onLoaded, false);
function onLoaded(evt)
{
	qsa('input')[0].addEventListener('keypress', inputElemKeypress, false);
	qsa('button')[0].addEventListener('click', onShowAllClicked, false);
}

function inputElemKeypress(evt)
{
	if (evt.key == 'Enter')	// keyCode == 13
	{
		let tgtContainer = qsa('ul.list')[0];
		let newRow = newEl('li');
		let newInput = newEl('input');
		newInput.addEventListener('keypress', inputElemKeypress, false);
		newInput.classList.add('input-new-list');
		newRow.appendChild(newInput);
		tgtContainer.appendChild(newRow);
		newInput.focus();
	}
}

function onShowAllClicked(evt)
{
	var inputs = Array.from( qsa('input.input-new-list') );
	var result = '';
	
	inputs.forEach( 
					function(element, index, collection)
					{
						result += `[${index+1}] - ${element.value}<br>`;
					}
				);
	qsa('output')[0].innerHTML = result;
}

<button>Show all items</button></br>
    <div class="to-do-wrapper">
        <ul class="list">
            <li id="new-list"> <i class="fas fa-check" id="checkmark" style="display: none;"></i> <input type="text" placeholder="Add a new Item" class="input-new-list"></input> <i class="fas fa-times" id="remove" style="display: none;"></i></li>
        </ul>
    </div>
	<output></output>

寻找一种绕过querySelector的方法，只需选择第一个元素或类

1 个答案: