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

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

Share Improve this question edited Mar 30, 2016 at 8:54 Rory McCrossan 338k41 gold badges320 silver badges351 bronze badges asked Mar 29, 2016 at 12:40 Raviteja 3,48923 gold badges45 silver badges74 bronze badges

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

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

6 Answers 6

与本文相关的文章

评论列表(0)