Adding Autofocus Attribute When Input Is Hovered

I'm trying to add autofocus to an input form when it's hovered. Using the .appentTo attribute but open to other solutions. Here's what I have: $(document).

Solution 1:

To focus an element use focus() method. Here you try to add the attribute autofocus with a bad method (take a look at Zakaria's answer) to all input. Use $(this)for target the hovered element

Example

$(document).ready(function(){
    $("input").hover(function(){
       $(this).focus();
    });
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputvalue=""/><inputvalue=""/><inputvalue=""/>

Solution 2:

To add attribute to element you should use .attr() or .prop() and not appendTo :

$(document).ready(function(){
  $("input").hover(function(){
     $(this).prop('autofocus');
  });
});

NOTE : The autofocus attribute will not make the input focused but focus() instead.

Hope this helps.

Solution 3:

 $(document).ready(function(){
    $("input").hover(function(){
        $(this).focus();
    });
});

https://jsfiddle.net/t7yj3b4n/2/

Solution 4:

You must use .focus();

$(document).ready(function(){
     $("input").hover(function(){
        $(this).focus();
        });
});