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

Ответ 1

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

$(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();
      }
    );
  }
);

.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;
}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<div class="textarea-wrapper">
  <textarea></textarea>
</div>

Ответ 2

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

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

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

Update:

Известно, что не работает в iOS 8 и IE 11

Другая идея моего немного более взломана и требует javascript.

Часть HTML и CSS:

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

Часть Javascript:

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

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

Ответ 3

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

Ответ 4

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

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

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

Ответ 5

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

Ответ 6

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

Ответ 7

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

Работает в iOS8.

Ответ 8

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

Ответ 9

просто сделал доказательство концепции для моего друга, используя идею @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>

Ответ 10

в CSS:

caret-color: transparent;

Ответ 11

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

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