Set focus to an input field without blinking cursor

Question

I have a textfield (fullname) and on click of the button "Set Focus", i want the focus to be set on the textfield(fullname) but do not want the blinking cursor within the focused textfield. How can this be achieved using js/jQuery.

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Customer Details</title>    
</head>
<body>    
    <input type="text" id="fullname" placeholder="Name">      
    <button type="button" onClick="document.getElementById('fullname').focus()" id="button">Set Focus</button>
</body>
</html>

I have tried using both jquery and js focus(). But in both the cases, i could see blinking cursor in the focused textfield. I saw a solution which requires me to alter the text-shadow, border and outline to achieve this. But i want to retain the border and outline for the focused textfield

http://jsfiddle.net/jks0e2zy/10/ ??? http://stackoverflow.com/a/23516280/1414562 — A. Wolff, Nov 02 '15 at 10:42
@A. Wolf : I have clearly mentioned that i need to retain outline and border. — Rajasri.J, Nov 02 '15 at 10:54
@Rajasri.J `text-shadow` doesn't (shouldn't) affect border nor outline. So on which browser are you testing it? What's wrong with jsFiddle provided in my previous comment? EDIT: i see, doesn't work on IE — A. Wolff, Nov 02 '15 at 11:00
@A. Wolf: the fiddle link which you have posted works fine in chrome and IE11. But i wasn't able to find the border when i incorporated it in my project. so i have included "border-color:#colorcode" in my project and it works as intended now. :) thanks for your time and help :) — Rajasri.J, Nov 02 '15 at 12:02

score 5 · Accepted Answer · answered Nov 02 '15 at 11:23

5

This trick seems to work on all major browser, keeping outline\border and hiding blinking caret:

#fullname:focus{
    text-indent: -9999em;
    text-shadow : 9999em 0 0 #000;
}

<input type="text" id="fullname" placeholder="Name" />      
    <button type="button" onClick="document.getElementById('fullname').focus()" id="button">Set Focus</button>

answered Nov 02 '15 at 11:23

A. Wolff

74,033
9
94
155

1

IE9 < doesn't support text-shadow property. You could try this polyfill but not sure this will fit your needs (im quite busy right now so i don't have time to test it unfortunately) https://github.com/heygrady/textshadow – A. Wolff Nov 02 '15 at 12:22
This answer deserves a lot more upvotes. Works in IE10, 11, Edge, Chrome, Firefox – Perfection Jul 11 '16 at 08:17

score 1 · Answer 2 · answered Nov 02 '15 at 10:51

Here's what you want? see my code, apply it :) it will focus input field when the button is clicked. Happy Coding.

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Customer Details</title>    
    <style>
#fullname {
border: none;
    color: transparent;
    display: inline-block;
    font-size: 2em;
    text-shadow: 0 0 0 gray;
    width: 2em;
width: 200px;
border: 1px solid black;
}
#fullname:focus {
        outline: none;
    }
</style>
</head>
<body>    
    <input type="text" id="fullname" placeholder="Name">      
    <button type="button" onClick="document.getElementById('fullname').focus()" id="button">Set Focus</button>
</body>
</html>

score 0 · Answer 3 · answered Nov 02 '15 at 11:12

Hi i have made one Hack hope this will help :D

<div style="position:relative">
    <input type="text" id="txt" /> 
    <span id="txt2"></span>
</div>

var txt = $('#txt');
txt.focus()
$('#txt').on('keyup', function () {
    var val = $(this).val();
    //alert(val);
    $('#txt2').text(val)
})


#txt:focus {
    outline:none
}
*[id^="txt"] {
    position:absolute;
    outline:none 
}
#txt {
z-index:12;
background:#ddd;
opacity:0.0;
width:200px;
height:30px
}
#txt2 {
height:30px;
border:1px solid #ddd;
display:block;
width:200px;
word-wrap: break-word;
overflow:hidden;
line-height:30px
}

Here is the link please have a look

here : what i am doing is i have made one input and a span inside a relatively positioned div and then i have managed its children with absolute position on each other and made input transparent after this i have use keyp function and taking value of input and changing text of span ..hope it will help

Set focus to an input field without blinking cursor

3 Answers3