javascript - How to change the title of input based on the input being typed? - Stack Overflow

admin管理员组

文章数量:1353303

I've an empty input box where I can type whatever I want to. When I hover my mouse on the input it should show title as the text present in input box.

<input type="text" />

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

Live Demo

I've an empty input box where I can type whatever I want to. When I hover my mouse on the input it should show title as the text present in input box.

<input type="text" />

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

Live Demo

• javascript
• jquery
• input
• mouseover

Share Improve this question Follow edited Mar 30, 2016 at 8:54 Rory McCrossan 338k4141 gold badges320320 silver badges351351 bronze badges asked Mar 29, 2016 at 12:40 RavitejaRaviteja 3,4892323 gold badges4545 silver badges7474 bronze badges 2

• 1 $(document).ready(function() { $('input').keyup(function() { var $txt = $(this).val(); $(this).attr('title', $txt); }) }) – Rayon Commented Mar 29, 2016 at 12:41
• That was too quick.Didn't think of keyup. thanks – Raviteja Commented Mar 29, 2016 at 12:43

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 4

Use keyup event to update the title attribute. As mentioned by Alex, Using this in the handler will read the value of the current input element and will update title attribute of the current input element. $('input') will select all the input tag elements and .attr() will set attribute for all the matched elements.

Also note, you should use .val() to get the value from the input than text()

Try this:

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

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

Edit: Or use input, event is fired synchronously when the value of an <input> or <textarea> element is changed. Use .trigger('input') just to make sure that title is set initially before input event is invoked.

Try this:

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

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

You should use the input event to set the title attribute as this will catch both when people type directly in to the field, and also when they paste something in to it. Also note that to follow best practices, you should set the title using prop(), not attr(). Try this:

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

Working example

you can use the input event listener:

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

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

to get the value from input use the .val() method,

you add .val() value to the title attribute an you're done !!

if you have multiple input elements use $(e.target) as selector for getting the value and setting title attribute.

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

you can simply use the above script, to get your requirement done.

use of onInput event will undertake paste, drop and other all input formats.

Working Fiddle : https://jsfiddle/6pys5hoy/

<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>

If you want to design with JavaScript, this is what it looks like

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

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

本文标签： javascriptHow to change the title of input based on the input being typedStack Overflow