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://api.jquery.com/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);
});

进一步阅读，

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());

        });

    });

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

4 个答案: