當與多種元素型別一起使用時，跨單個CSS類設定EventListeners會出現null-有解無憂

我試圖讓浮動標簽在您點擊輸入時動態調整大小，就像今天更多的表單一樣。我正在使用 vanilla JS，并且專門針對這個問題使用 vanilla JS。

我目前已對其進行設定，以便它與標簽一起使用。但是，對于我的標簽，它沒有。出于某種原因，每次我在一兩天內查看這個問題或查看然后離開以重置自己時，當我嘗試將 .active 類添加到它時，我不明白為什么我的元素出現空值，所以以使字體和影片正常播放。這是現在運行的 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 以獲取它抓取的元素串列時，我可以在該串列中看到。但是，當我嘗試添加活動類以檢查文本是否在 textarea 內時，它會出現 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>

uj5u.com熱心網友回復：

我寧愿建議為您的輸入和文本區域提供類似input.
這樣您就不必檢查欄位的型別及其當前值。

// 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");
  if (floatField) {
    floatField.addEventListener("focus", handleFocus);
    floatField.addEventListener("blur", handleBlur);
  }
};

// get DOM elements
const init = () => {
  const floatContainers = document.querySelectorAll(".float-container");
  floatContainers.forEach((element) => {
    let input = element.querySelector(".input");
    let inputVal = input ? input.value : "";
    if (inputVal) {
      input.classList.add("active");
    }
    bindEvents(element);
  });
};


init();

/*{
    width: 66%;
    position: relative;
}
*/
* {
  box-sizing: border-box
}


.input{
  border: 2px dotted #000;
  width: 100%!important;
}

.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" class="input" 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" class="input" input 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"  class="input" 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 oi</label>
  <input type="tel" id="phoneNumber"  class="input" 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" class="input" name="problemDesc"></textarea><br>
</div>

init 函式可能如下所示（使用三元運算子檢查當前值）：

const init = () => {
  const floatContainers = document.querySelectorAll(".float-container");
  floatContainers.forEach((element) => {
    let input = element.querySelector(".input");
    let inputVal = input ? input.value : "";
    if (inputVal) {
      input.classList.add("active");
    }
    bindEvents(element);
  });
};

uj5u.com熱心網友回復：

對于您的注釋代碼：您可以使用可選的鏈接運算子在訪問值之前檢查 querySelector('textarea') 回傳物件是否存在。

看起來您的 bindEvents 函式正在將事件偵聽器分配給 input 元素而不是 input 和 textarea 元素。

編輯：更多資訊。

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/386345.html

標籤：javascript html css 形式

上一篇：Flutter文本欄位-何時以及如何將資料保存到遠程服務器？

下一篇：JavascriptPOST功能只發送到一個POST位置