Скрыть текстовое поле мигающий курсор

У меня есть текстовое поле есть ли способ скрыть мигающий текстовый курсор? Я говорю это, потому что я делаю веб-сайт ужасов/тайн, и одна из подсказок-начать печатать в любом месте.

может быть, я могу сделать это с помощью JavaScript?

10 52
html uitextfielddelegate

10 ответов:

попробуйте это:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title >Text Area with no Carat</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <style type="text/css">
        .textarea-wrapper {
            position:relative;
        }
        .textarea-wrapper textarea {
            background-color:white;
        }
        .textarea-wrapper, .textarea-wrapper textarea {
            width:500px;
            height:500px;
        }
        .textarea-wrapper textarea.hidden {
            color:white;
            opacity:0.00;
            filter:alpha(opacity=00);
            position:absolute;
            top:0px;
            left:0px;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(
            function() {
                $("textarea").addClass("-real-textarea");
                $(".textarea-wrapper").append("<textarea class=\"hidden\"></textarea>");
                $(".textarea-wrapper textarea.hidden").keyup(
                    function() {
                        $(".textarea-wrapper textarea.-real-textarea").val($(this).val());
                    }
                );
                $(".textarea-wrapper textarea.-real-textarea").focus(
                    function() {
                        $(this).parent().find("textarea.hidden").focus();
                    }
                );
            }
        );
    </script>
</head>
<body>

    <div class="textarea-wrapper">
        <textarea></textarea>
    </div>

</body>
</html>

идея состоит в том, чтобы создать второй, невидимый <textarea> over / on-top-of the real one. Пользователь вводит невидимый, но текст не появляется (ни курсор / курсор), поскольку он невидим! Затем вы используете JavaScript, чтобы присвоить его значение видимому.

но он, похоже, не работает в IE8 :'( каретка все еще видна, хотя непрозрачность сгибается до 11.

но он работает в Firefox... ?

20

основная идея заключается в том, что цвет курсора совпадает с цветом текста. Поэтому первое, что вы делаете, это делаете текст прозрачным, тем самым убирая курсор с него. Затем вы можете снова сделать текст видимым с помощью текстовой тени.

используйте эту ссылку, чтобы увидеть его в прямом эфире в jsfiddle.

input[type="text"]{
    color : transparent;
    text-shadow : 0 0 0 #000;
}
input[type="text"]:focus{
    outline : none;
}

обновление:

не работает в iOS 8 и IE 11

еще одна идея моего это немного более хаки и требует javascript.

HTML и CSS часть:

вы делаете 2 поля ввода и располагаете одно точно поверх другого с Z-индексом и т. д. Затем вы делаете верхнее поле ввода полностью прозрачным, без фокуса, без цвета и т. д. Вам нужно установить видимый, Нижний вход отключенным, так что он показывает только содержимое указанного выше входа, но на самом деле не работает.

Javascript часть:

после все выше вы синхронизируете два входа. При нажатии клавиши или при изменении вы копируете содержимое верхнего входа в Нижний.

Суммируя все вышесказанное: вы вводите невидимый ввод, и это будет отправлено на серверную часть при отправке формы, но каждое обновление текста в ней будет отражено в Нижнем видимом, но отключенном поле ввода.

56

Я искал способ скрыть мигающий курсор на устройствах iOS для ввода даты, которые запускают календарь, потому что вы могли видеть, как курсор мигает поверх средства выбора календаря. 

input:focus { text-indent: -9999em; }

Так что в этом случае мой CSS работает хорошо, очевидно, недостатком является то, что если вам нужно увидеть, что вы печатаете, то это не хорошо

18

caret-color: transparent !important; работает в новых браузерах

11

Я думаю, что это идеальное решение: сделайте вход достаточно широким, выровняйте право на экран справа, таким образом, сделайте курсор и содержимое расположенными за пределами экрана, пока он все еще доступен для клика perfect solution

6

к сожалению, вы не можете стилизовать текстовый курсор с помощью CSS. Вы можете делать только некоторые очень плохие трюки JavaScript, но в зависимости от макета и требований вашего сайта это может быть вообще невозможно. Поэтому я бы рекомендовал забыть всю эту идею.

4

<input style="position: fixed; top: -1000px">

работает в iOS8.

3

function noCursor(a){
  var a = document.getElementById(a),
      b = document.createElement('input');
  b.setAttribute("style","position: absolute; right: 101%;");
  a.parentNode.insertBefore(b, a);

  if(a.addEventListener){
    b.addEventListener("input",function(){a.value = b.value});
    a.addEventListener("focus",function(){b.focus()});
  }else{
    a.attachEvent("onfocus",function(){b.focus()});
    b.attachEvent("onpropertychange",function(){a.value = b.value});
  };
 
}

noCursor('inp');
<input id="inp">

вы можете использовать функцию для каждого элемента, для которого вы не хотите использовать курсор.

1

только что сделал доказательство концепции для моего друга, используя идею @sinfere:

demo:http://jsfiddle.net/jkrielaars/y64wjuhj/4/

начало ввода смещено, поэтому он выходит за пределы контейнера (который имеет скрытое переполнение) Фактические карактеры (и мигающий курсор) никогда не попадут в поле зрения. Поддельный div помещается под полем ввода, поэтому нажатие на поддельный div установит фокус на невидимом входе.

<div class="container">
    <div id="fake" class="fake">
        <span class='star empty'></span>
        <span class='star empty'></span>
        <span class='star empty'></span>
        <span class='star empty'></span>
    </div>
    <input type="text" id="password" class="invisible" maxlength="4">
</div>
0

вы можете "скрыть текстовое поле мигающий курсор", вызвав функция размытия на фокус событие

<input type="text" onfocus="this.blur()"/>
-1