Menu
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
255
asked Mar 24 '26 04:03
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>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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
