Установите фокус на поле ввода без мигающего курсора

У меня есть текстовое поле (полное имя) и по нажатию кнопки «Установить фокус», я хочу, чтобы фокус был установлен на текстовое поле (полное имя), но не нужно, чтобы мигающий курсор в пределах сосредоточенного текстового поля. Как это можно достичь с помощью 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 <не поддерживает свойство text-shadow. Вы можете попробовать этот полиполк, но не уверены, что это подойдет вашим потребностям (я довольно занят сейчас, поэтому у меня нет времени проверить его, к сожалению) https://github.com/heygrady/textshadow –

Этот ответ заслуживает гораздо большего внимания , Работает в 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. –

Привет я сделал один 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 и принимаю значение ввода и изменяя текст диапазона. Надеюсь, это поможет

источник

2015-11-02 11:12:34 Deepak

Установите фокус на поле ввода без мигающего курсора

ответ

Смежные вопросы