找不到使用Javascript訪問輸入欄位的方法

我正在嘗試找到一種方法來使用 javascript 更改下面輸入欄位的值。問題是我找不到輸入欄位的任何 id 或名稱，因此不知道如何訪問它。

我已經使用 document.getElementById 訪問其他欄位來更改它們的值，但由于此輸入欄位沒有 Id，我不確定如何處理它。下面的代碼不是我自己的，因此我不能簡單地添加一個 id。關于如何解決問題的任何想法？

<ul class="form-control recipient-input ac-input rounded-left">
 <li class="input">
  <input type="text" tabindex="1" autocomplete="off" aria-autocomplete="list" aria- expanded="false" role="combobox" aria-haspopup="false">
 </li>
</ul>

uj5u.com熱心網友回復：

您可以document.querySelector用于定位具有不同屬性的相同元素。您甚至可以使用屬性串列

const node1 = document.querySelector('input[type="text"]');
console.log(node1);
const node2 = document.querySelector('input[tabindex="1"]');
console.log(node2);
const node3 = document.querySelector('input[autocomplete="off"]');
console.log(node3);
const node4 = document.querySelector('input[aria-autocomplete="list"]');
console.log(node4);
const node5 = document.querySelector('input[aria-expanded="false"]');
console.log(node5);
const node6 = document.querySelector('input[role="combobox"]');
console.log(node6);
const node7 = document.querySelector('input[aria-haspopup="false"]');
console.log(node7);
const node8 = document.querySelector('input[type="text"][tabindex="1"][autocomplete="off"][aria-autocomplete="list"][aria-expanded="false"][role="combobox"][aria-haspopup="false"]');
console.log(node8);

<ul class="form-control recipient-input ac-input rounded-left">
  <li class="input">
    <input type="text" tabindex="1" autocomplete="off" aria-autocomplete="list" aria-expanded="false" role="combobox" aria-haspopup="false">
  </li>
</ul>

uj5u.com熱心網友回復：

const el = document.querySelector('input[type=text]');
console.log(el)

<ul class="form-control recipient-input ac-input rounded-left">
 <li class="input">
  <input type="text" tabindex="1" autocomplete="off" aria-autocomplete="list" aria- expanded="false" role="combobox" aria-haspopup="false">
 </li>
</ul>

uj5u.com熱心網友回復：

<input />元素應始終包含在<form />.

通過將 aname賦予您的<form name="my-form"><input name="firstName" /></form>，可以輕松訪問表單的任何欄位，而無需id在 HTML 中使用 fixed并使其<form />可在視圖中的任何位置重用。

window.onload = bindEvents

function bindEvents() {
  const { name } = document.forms['my-form']
  name.addEventListener('keypress', onChangeName, true)
}

function onChangeName(event) {
  console.log(event.target.value)
}

<form name="my-form">
  <ul>
   <li>
    <label for="name">Name</label>
    <input name="name" />
   </li>
  </ul>
</form>

uj5u.com熱心網友回復：

我認為“document.querySelector”足以完成這項作業。下面的代碼可能有用。

document.addEventListener("DOMContentLoaded", function() {
    var elm = document.querySelector('.recipient-input input');
    // Get the full DOM object of input element 
    console.log(elm);    
    
    // Get input value
    var val = elm.value;
    console.log(val);
    
    // Get any attribute
    var attr  = elm.getAttribute("role");
    console.log(attr);
    
    // Set input value
    elm.value = "This is a form element";
    console.log(elm.value);
    
    // Change any attribute
    elm.setAttribute("role", "primary");
    console.log(elm.getAttribute("role")); 
});

<ul class="form-control recipient-input ac-input rounded-left">
 <li class="input">
  <input type="text" tabindex="1" autocomplete="off" aria-autocomplete="list" aria- expanded="false" role="combobox" aria-haspopup="false">
 </li>
</ul>

標籤：javascript html

上一篇：如何在多個網格上制作內容？

下一篇：我的按鈕不會發送她的表格而是另一種表格