web-dev-qa-db-ja.com

テキストフィールドの点滅カーソルを非表示

テキストフィールドがありますが、点滅するテキストカーソルを非表示にする方法はありますか？私がこれを言うのは、私がホラー/ミステリーのウェブサイトをやっていて、手がかりの1つがどこでもタイプを始めることだからです。

たぶん私はjavascriptでそれを行うことができますか？

htmltextfield
53
test

これを試して：

$(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番目の<textarea>本物の上/上。ユーザーは非表示のものを入力していますが、テキストは表示されないため（キャレット/カーソルも）表示されません！次に、JavaScriptを使用して、その値を表示されている値に割り当てます。

しかし、IE8では動作しないようです： '（不透明度が11まで上げられても、キャレットはまだ表示されています。

しかし、それはFirefoxで動作します...？

19
Richard JP Le Guen

基本的な考え方は、カーソルの色がテキストの色と同じであるということです。そのため、最初に行うことは、テキストを透明にし、カーソルをそれから離すことです。次に、テキストをテキストシャドウで再度表示できます。

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-indexなどを使用して1つを他の入力フィールドの上に正確に配置します。次に、上部の入力フィールドを完全に透明、フォーカスなし、色なしなどにします。上記の入力の内容のみを表示し、実際には機能しないように、可視の低い入力を無効に設定する必要があります。

Javascriptパート：

上記のすべての後、2つの入力を同期します。キーを押すか、変更すると、高い入力の内容を低い入力にコピーします。

上記のすべてを要約すると、非表示の入力を入力すると、フォームが送信されたときにバックエンドに送信されますが、そのテキストの更新はすべて、表示されているが無効な入力フィールドにエコーされます。

58
Lajos Meszaros

caret-color: transparent !important;新しいブラウザで動作します

23
cdeutsch

カレンダーピッカーの上でカーソルが点滅するのを見ることができるので、カレンダーをトリガーする日付入力のためにiOSデバイスで点滅カーソルを非表示にする方法を探していました。

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

したがって、この場合、私のCSSはうまく機能します。明らかにマイナス面は、入力しているものを確認する必要がある場合、それが良くないことです。

20
Slavo

これは完璧なソリューションだと思います：入力を十分に広くし、画面の右に揃えて、カーソルとコンテンツを画面の外側に配置しますが、それでもクリック可能です perfect solution

6
sinfere

残念ながら、CSSでテキストカーソルのスタイルを設定することはできません。非常に悪いJavaScriptのトリックをいくつかしか実行できませんが、Webサイトのレイアウトと要件によっては、まったく不可能な場合があります。だから私は全体のアイデアを忘れることをお勧めします。

4
2ndkauboy

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

IOS8で動作します。

3
Daiwei
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
Silvester Wennekers

@sinfereのアイデアを使用して、私の友人の概念実証を作成しました。

デモ： 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
JasperZelf