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

【问题标题】：How to change the title of input based on the input being typed?如何根据输入的输入更改输入的标题？
【发布时间】：2016-03-29 12:40:29
【问题描述】：

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

<input type="text" />

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

Live Demo

【问题讨论】：

$(document).ready(function() { $('input').keyup(function() { var $txt = $(this).val(); $(this).attr('title', $txt); }) })
太快了，没想到keyup。谢谢

标签： javascript jquery input mouseover

【解决方案1】：

使用keyup 事件更新title 属性。正如 Alex 所述，在handler 中使用this 将读取current 输入元素的值，并将更新current 输入元素的title 属性。 $('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')确保在调用input 事件之前设置title initially。

试试这个：

$(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' />

【讨论】：

在这种情况下，this 的使用似乎更重要:)
或者您可以使用on('input' 事件处理程序
也是.val()instdead of .text()
如果像<input type="text" value="input text" />这样的文本已经存在怎么办？

【解决方案2】：

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

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

Working example

【讨论】：

有什么理由在 prop() 调用中需要匿名函数吗？不能只是：$(this).prop('title', $(this).val());？
可以，但这只是个人喜好。重要的部分是使用prop()，而不是attr()
明白。我只是在查看一个编辑建议以“清理”您发布的答案，虽然我不同意该建议（因为被拒绝），但我个人会按照我在评论中发布的那样写它，但不是确定我是否遗漏了什么并希望得到您的意见。
作为参考，我更喜欢为方法提供函数的原因是因为它通常不需要循环或创建另一个 jQuery 对象来保存对原始元素的引用。由于这是一个非常简单的案例，它并没有太大的区别，但是对于更复杂的逻辑，它是迄今为止更好的使用方法。

【解决方案3】：

你可以使用输入事件监听器：

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

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

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

您将.val() 值添加到标题属性，然后您就完成了！

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

【讨论】：

【解决方案4】：

$("input[type=text]").on("input", function() {
   $(this).attr("title", $(this).val());
});

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

使用onInput事件将承接paste、drop等所有输入格式。

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案6】：

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

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

&lt;input type="text" id='INPUT' /&gt;

【讨论】：