如何使用JavaScript获取HTML元素的属性

This is a newb question, but it makes me pulling my hairs:

这是一个新问题，但它让我拉扯我的头发：

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

I would like to get the value of this input when user mouseOut. How can I do this using jQuery/javaScript?

我想在用户mouseOut时获取此输入的值。我怎么能用jQuery / javaScript做到这一点？

Thank you.

谢谢。

4 个解决方案

#1

You can use .val() to get the value of a form element:

您可以使用.val（）来获取表单元素的值：

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

You can also use .attr() to get an attribute for an element:

您还可以使用.attr（）来获取元素的属性：

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

Docs:

文档：

.val(): http://api.jquery.com/val
.val（）：http：//api.jquery.com/val
.attr(): http://api.jquery.com/attr
.attr（）：http：//api.jquery.com/attr

An example of your desired code:

您所需代码的示例：

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

Notice that you can get the value of an input element inside an event handler with this.value which will perform much faster than using $(this).val().

请注意，您可以使用this.value获取事件处理程序内的input元素的值，该值将比使用$（this）.val（）快得多。

[Suggestion] - If you want to get the value after the user has finished editing the value of the input then I suggest using the blur event (mouseout fires when the user moves the cursor over the element, then away):

[建议] - 如果你想在用户完成编辑输入值后获取值，那么我建议使用模糊事件（当用户将光标移到元素上时，mouseout会触发，然后离开）：

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

Note that .on() is new in jQuery 1.7 and in this case is the same as using .bind().

请注意.on（）是jQuery 1.7中的新增内容，在这种情况下与使用.bind（）相同。

#2

$(document).ready(function () {

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

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

        });

    });

#3

Plain JS way:

简单JS方式：

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

要么

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

Cross browser binding is sometimes problematic, but it's basicly something like:

跨浏览器绑定有时会出现问题，但它基本上类似于：

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

jQuery way:

jQuery方式：

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

要么

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

binding

捆绑

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

#4

You going to need to implement the mouseout event handler first and then you can use this.value the value of the input and .attr to get the value of any non-standard attribute.

您将需要首先实现mouseout事件处理程序，然后您可以使用this.value输入和.attr的值来获取任何非标准属性的值。

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

DEMO

DEMO

#1