如何使用JavaScript獲取HTML元素的屬性

Question

這是一個新問題，但這使我不敢理:：

<div class="search-input-field">
  <input type="text" value="amazon" placeholder="Search" name="search" id="search">
</div>

我想在用戶mouseOut時獲取此輸入的值。 如何使用jQuery / javaScript執行此操作？

謝謝。

Answer 1

您可以使用.val()來獲取表單元素的值：

var value = $('#search').val();

您還可以使用.attr()獲取元素的屬性：

var placeholderText = $('#search').attr('value');

文件：

• .val() ： http ： .val()
• .attr() ： http ： //api.jquery.com/attr

所需代碼的示例：

$('#search').on('mouseout', function () {
    alert(this.value);
});

請注意，您可以使用this.value事件處理程序中輸入元素的值，其執行速度將比使用$(this).val() 。

[建議] -如果要在用戶完成輸入值的編輯后獲取值，則建議使用blur事件（當用戶將光標移到元素上然后移開時，將觸發mouseout ）：

$('#search').on('blur', function () {
    alert(this.value);
});

請注意， .on()是jQuery 1.7中的新功能，在這種情況下與.bind()相同。

Answer 2

您將需要首先實現mouseout事件處理程序，然后可以使用this.value輸入的值和.attr來獲取任何非標准屬性的值。

var $search = $('#search');
$search.mouseout(function () {
   alert(this.value);
   alert(this.name);
});

演示

進一步閱讀

.val（）

.attr（）

.mouseout

Answer 3

普通JS方式：

var myValue = document.getElementsByName("search")[0].value;

要么

var myValue = document.getElementById("search").value;

跨瀏覽器綁定有時會出現問題，但基本上是這樣的：

document.getElementById("search").addEventListener('onmouseout',function () {
    var myValue = this.value;
},false);

jQuery方式：

var myValue = $('#search').val();

要么

var myValue = $('input[name="search"]').val();

捆綁

$('#search').on('click', function() {var myValue = this.value});

Answer 4

$(document).ready(function () {

        $('div.search-input-field').mouseout(function () {

            alert($('div.search-input-field input:first').val());

        });

    });