将焦点设置为不闪烁光标的输入字段

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

来源

2015-11-02 Rajasri.J

http://jsfiddle.net/jks0e2zy/10/ ??? http://stackoverflow.com/a/23516280/1414562 –

看到我的代码如下，我为你做了一个代码。见下文:) –

@A。狼：我已经明确提到我需要保留轮廓和边框。 –

这一招似乎在所有主要的浏览器中运行，保持轮廓\边框和隐藏闪烁的插入符：

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

来源

2015-11-02 11:23:17

它不在IE9中工作。对此有何建议？ –

IE9 <不支持文本阴影属性。你可以尝试这个polyfill，但不知道这会满足你的需求（我现在很忙，所以我没有时间测试它不幸）https://github.com/heygrady/textshadow –

这个答案值得更多upvotes 。适用于IE10,11，Edge，Chrome，Firefox – Perfection

这是你想要的吗？看到我的代码，应用它:)它会在点击按钮时关注输入字段。快乐编码。

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

来源

2015-11-02 10:51:59

它工作在铬，而不是在IE浏览器。 –

嗨，我取得了一个哈克希望这将帮助：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功能，并采取价值的输入和改变文本span ..hope它将帮助

来源

2015-11-02 11:12:34 Deepak

将焦点设置为不闪烁光标的输入字段

回答

相关问题