【发布时间】：2022-01-20 13:13:51
【问题描述】：
我正在尝试使浮动标签在您单击输入时动态调整自身大小，就像今天的更多表单一样。我正在使用 vanilla JS 并专门使用 vanilla JS 来解决这个问题。
我目前已对其进行了设置，以便它可以与标签一起使用。但是，对于我的标签，它没有。出于某种原因，每次我在一两天内研究这个问题或寻找然后走开以重置自己时，当我尝试将 .active 类添加到它时，我看不到为什么我的元素出现 null ，所以以使字体和动画正常播放。这是 JS 脚本，因为它现在可以运行
// add active class
const handleFocus = (e) => {
const target = e.target;
target.parentNode.classList.add('active');
target.setAttribute('placeholder', target.getAttribute('data-placeholder'));
};
// remove active class
const handleBlur = (e) => {
const target = e.target;
if(!target.value) {
target.parentNode.classList.remove('active');
}
target.removeAttribute('placeholder');
};
// register events
const bindEvents = (element) => {
const floatField = element.querySelector('input');
floatField.addEventListener('focus', handleFocus);
floatField.addEventListener('blur', handleBlur);
};
// get DOM elements
const init = () => {
const floatContainers = document.querySelectorAll('.float-container');
//I can see the textarea element in this list.
console.log(document.querySelectorAll('.float-container'));
floatContainers.forEach((element) => {
if (element.querySelector('input').value) {
element.classList.add('active');
}
//The commented section below causes a "TypeError querySeclector is null"
/*
if (element.querySelector('textarea').value) {
element.classList.add('active');
}
*/
bindEvents(element);
});
};
return {
init: init
};
})();
window.onload=FloatLabel.init();
正如脚本的注释部分所述，当我检查 console.log 以获取它抓取的元素列表时，我可以在该列表中看到 。但是，当我尝试添加活动类以检查文本是否在文本区域内时，它会出现 null 并破坏脚本。
我不确定是否有什么我没有看到，或者我是否根本不知道/不了解正在发生的事情的一部分。我还检查以确保我得到的 TypeError 与 DOM 未准备好无关。我还确保脚本位于 php 文件的底部，并且为了更好地添加了 defer 关键字。虽然，根据我对 JS 的了解，将 defer 放在文档底部的脚本上并没有做任何事情，但我离题了。这是涉及的 CSS 类。
{
width: 66%;
position: relative;
}
.float-container.small input
{
width: 50%;
outline-offset: 1px;
font-size: 16px;
padding: 16px 4px 10px 4px;
border-radius: 4px;
}
.float-container.small textarea
{
width: 100%;
outline-offset: 1px;
font-size: 16px;
padding: 16px 4px 10px 4px;
border-radius: 4px;
color: red;
}
.float-container.large input
{
width: 100%;
outline-offset: 1px;
font-size: 16px;
padding: 16px 4px 10px 4px;
border-radius: 4px;
}
.float-container.active
{
border: 2px solid #1A57FF;
outline: 2px solid rgba(26, 87, 255, 0.3);
border-radius: 4px;
}
.float-container.active label
{
transform: translate(0, 4px) scale(.75);
}
.floating-text
{
position: absolute;
font-size: 16px;
text-decoration: underline;
color: rgb(100, 100, 100);
transform: translate(0, 16px) scale(1);
transform-origin: top left;
transition: all .1s ease-in-out;
}
最后，这里是来自文档的表单部分
<div id="floatContainer" class="float-container small">
<label for="fName" class="floating-text">First Name</label>
<input type="text" id="fName" name="fName" data-placeholder="First name"><br>
</div>
<p id="fName-validate" class="form-validate-text"><p>
<div id="floatContainer" class="float-container small">
<label for="lName" class="floating-text">Last Name</label>
<input type="text" id="lName" name="lName" data-placeholder="Last name"><br>
</div>
<p id="lName-validate" class="form-validate-text"><p>
<div id="floatContainer" class="float-container small">
<label for="email" class="floating-text">Email</label>
<input type="text" id="email" name="email" data-placeholder="Email"><br>
</div>
<p id="email-validate" class="form-validate-text"><p>
<div id="floatContainer" class="float-container small active">
<label for="phoneNumber" class="floating-text">Phone Number</label>
<input type="tel" id="phoneNumber" name="phoneNumber" data-placeholder="Phone"><br>
</div>
<p id="phoneNumber-validate" class="form-validate-text"><p>
<div id="floatContainer" class="float-container small">
<label for="problemDesc" class="floating-text">Description of problem</label>
<textarea id="problemDesc" name="problemDesc"></textarea><br>
</div>
【问题讨论】：
-
大多数
.float-container元素中没有任何textarea（只有最后一个有），所以element.querySelector('textarea')在这些返回null上并尝试阅读.value会引发错误。 -
@T.J.Crowder 对，但是当其中有文本时，我如何让脚本检查/更新 textarea 的类？
-
只需添加一个守卫：
const textArea = element.querySelector("textarea"); if (textArea) { /*...code to handle text area here...*/ }. -
它不再抛出错误，脚本也没有崩溃，但是不幸的是文本区域仍然没有响应。
标签： javascript html css forms