如何使用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());

        });

    });