Question

我有一个空的输入框，我可以输入我想要的任何内容。当我将鼠标悬停在输入上时，它应该将标题显示为输入框中的文本。

<input type="text" />

$(document).ready(function() {
    $('input').mouseover(function() {
        var $txt = $('input').text();    
        $('input').attr('title', $txt);
    })
})

Live Demo

Answer 1

使用keyup事件更新title属性。正如 Alex 所述，在this中使用handler将读取current输入元素的值，并将更新title current属性{1}}输入元素。 $('input')会选择所有input代码元素，.attr()会为所有匹配的元素设置attribute。

另请注意，您应使用.val()从输入中获取值text()

试试这个：

$(document).ready(function() {
  $('input').keyup(function() {
    var $txt = $(this).val();
    $(this).attr('title', $txt);
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type="text" />

修改或使用input，当<input>或<textarea>元素的值发生更改时，会同步触发事件。使用.trigger('input')只是为了确保在调用title事件之前设置initially input。

试试这个：

$(document).ready(function() {
  $('input').on('input', function() {
    var $txt = $(this).val();
    $(this).attr('title', $txt);
  });
  $('input').trigger('input');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type="text" value='Hello' />

Answer 2

您应该使用input事件来设置title属性，因为这会在人们直接输入字段时以及将内容粘贴到字段时捕获。另请注意，要遵循最佳做法，您应使用title设置prop()，而不是attr()。试试这个：

$('input').on('input', function() {
    $(this).prop('title', function() {
        return this.value;
    });
})

Working example

Answer 3

您可以使用输入事件侦听器：

＆＃13;

$(document).ready(function() {
  $('input').on('input',function(e) {
    var $txt = $(e.target).val();
     $(e.target).attr('title', $txt);
  })
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="text" />

＆＃13;

从输入中获取值使用.val()方法

您将.val()值添加到标题属性中，并且已完成!!

如果您有多个input元素，请使用$(e.target)作为获取值和设置title属性的选择器。

Answer 4

<0

你可以简单地使用上面的脚本来完成你的要求。

$("input[type=text]").on("input", function() { $(this).attr("title", $(this).val()); });事件的使用将采用onInput，paste和其他所有输入格式。

工作小提琴： https://jsfiddle.net/6pys5hoy/

Answer 5

<script tyep="text/javascript">
$(document).ready(function(){
    function set_title($txt)
    {
        $('input').attr('title', $txt);
    }

   $(document).on('keyup','input',function()
   {
        var $txt = $(this).val();    
        set_title($txt);
    });

});
</script>

HTML

<body>
     <input type="text" />
</body>

Answer 6

如果你想用 JavaScript 设计，这就是它的样子

var input = document.getElementById('INPUT');
input.addEventListener('mouseup' , () => {
    input.setAttribute('title', input.value)
})

<input type="text" id='INPUT' />

如何根据输入的输入更改输入的标题？

6 个答案: