将焦点设置到输入字段而不闪烁光标答案

【问题标题】：Set focus to an input field without blinking cursor将焦点设置到输入字段而不闪烁光标
【发布时间】：2015-11-02 10:36:39
【问题描述】：

我有一个文本字段（全名），单击“设置焦点”按钮时，我希望将焦点设置在文本字段（全名）上，但不希望在焦点文本字段中闪烁光标。如何使用 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()。但在这两种情况下，我都可以在焦点文本字段中看到闪烁的光标。我看到了一个解决方案，它需要我改变文本阴影、边框和轮廓来实现这一点。但我想保留重点文本字段的边框和轮廓

【问题讨论】：

jsfiddle.net/jks0e2zy/10 ??? stackoverflow.com/a/23516280/1414562
见下面我的代码，我为你做了一个代码。见下文:)
@A. Wolf：我已经明确提到我需要保留轮廓和边框。
@Rajasri.J text-shadow 不会（不应该）影响边框或轮廓。那么你在哪个浏览器上测试呢？我之前的评论中提供的 jsFiddle 有什么问题？编辑：我明白了，在 IE 上不起作用
@A. Wolf：您发布的小提琴链接在 chrome 和 IE11 中运行良好。但是当我将它合并到我的项目中时，我无法找到边界。所以我在我的项目中包含了“border-color：#colorcode”，它现在按预期工作。 :) 感谢您的时间和帮助 :)

标签： javascript jquery html css

【解决方案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>

【讨论】：

IE9 github.com/heygrady/textshadow
这个答案值得更多的支持。适用于 IE10、11、Edge、Chrome、Firefox

【解决方案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>

【讨论】：

【解决方案3】：

嗨，我做了一个 Hack 希望这会有所帮助：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

这里：我正在做的是我在一个相对定位的 div 内做了一个输入和一个跨度，然后我用彼此的绝对位置管理了它的孩子，并在这之后使输入透明，我使用了 keyp 函数并取值输入和更改跨度文本..希望它会有所帮助

【讨论】：