Question

我试图有一个文本输入框，当你按下键盘上的键时，它会在列表中显示下面的ASCII代码。

当您第一次单击该框时，隐藏上面的段落。当您单击远离框时，我希望仅当下面没有代码列表（没有按下任何内容或所有内容都被删除）时，段落才会重新出现。

我试图用＆＃34; if（element.childNodes.length == 0）＆＃34;检查列表。但它不起作用。
谁能告诉我哪里出错了？

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>

<p id='press'>Press a key on the keyboard in the input field to get the Unicode character code of the pressed key.</p>

<input id="text" type="text" size=40 onkeypress="myFunction(event)" onkeydown="downFunction(event)">

<script>

function myFunction(event) {
		var x = event.which || event.keyCode || event.charCode;
    if(x >= 65 && x <= 90 || x >= 97 && x <= 122 || x == 32){ 
    		var element  = document.getElementById('ul');
				var fragment = document.createDocumentFragment();
				var li = document.createElement('li');
				li.textContent = String.fromCharCode(x) + ': ' + x;
				fragment.appendChild(li);
				element.appendChild(fragment);
        };
};

function downFunction(event) {
		var y = event.which || event.keyCode || event.charCode;
    if( y == 8 ){
    		var element  = document.getElementById('ul');
    		element.removeChild(element.lastChild);
};
};

$('#text').click(function(e){
		$('#press').hide();
    });
    
$('#text').focusout(function(e){
		var element  = document.getElementById('ul');
      if (element.childNodes.length == 0) {
        $('#press').show();
      };
    });

</script>

<ul id="ul">
</ul>

</body>
</html>

＆＃13;

Answer 1

您的代码无法正常工作的原因是因为您正在使用childNodes，它会计算元素的所有子节点，包括纯文本。虽然#ul中可能没有任何元素，但有一个文本节点。请注意：

<ul id = "ul">
</ul>

与以下内容不同：

<ul id = "ul"></ul>

要解决您的问题，请改用children，它会返回一个仅限元素的集合，该集合不会受到HTML代码空间的影响。可以在以下代码段中看到差异。

<强>段：

/* ----- JavaScript ----- */
var ul1 = document.getElementById("ul1");
var ul2 = document.getElementById("ul2");

console.log("ul1.childNodes: " + ul1.childNodes.length);
console.log("ul1.children: " + ul1.children.length);
console.log("ul2.childNodes: " + ul2.childNodes.length);
console.log("ul2.children: " + ul2.children.length);

<!------ HTML ----->
<ul id = "ul1">
</ul>

<ul id = "ul2"></ul>

Answer 2

尝试改变您的状况如下：

element.childNodes.length === 0 || 
(element.childNodes.length === 1 && !element.childNodes[0].tagName)

通过这种方式，您可以控制子项是否是具有tagName

的实际dom节点

JS：检查是否有儿童不工作

2 个答案: