在没有闪烁光标的情况下将焦点设置为输入字段

Question

我有一个textfield (全名)，在单击"Set“按钮时，我希望将焦点设置在textfield (全名)上，但不希望焦点集中的textfield中闪烁光标。如何使用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>

我尝试过使用jquery和js focus()。但在这两种情况下，我都可以看到焦点文本框中闪烁的光标。我看到了一个解决方案，要求我改变文本-阴影，边框和大纲来实现这一点。但是，我想保留焦点文本字段的边框和大纲。

Answer 1

这个技巧似乎适用于所有主要浏览器，保持大纲\边框并隐藏闪烁的插入符号：

​

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

​

Answer 2

这就是你想要的？查看我的代码，应用它:)当单击按钮时，它将聚焦输入字段。编码愉快。

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

Answer 3

嗨，我做了一个黑客，希望这会有帮助。

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

这是链接，请看一下

这里:我在一个相对定位的div中做了一个输入和一个span，然后我管理它的子程序，它们的绝对位置在对方上，并使输入变得透明。之后，我使用keyp函数，获取输入的值，并更改了span ..hope的文本，这将有所帮助。