將焦點設置爲不閃爍光標的輸入字段

我有一個文本框（全名），並單擊「設置焦點」按鈕時，我想要在文本框（全名）上設置焦點，但不希望閃爍的光標在關注的文本字段中。如何使用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

將焦點設置爲不閃爍光標的輸入字段

回答

相關問題