4

入力して値を変更できるフォームフィールド（通常のhtmlテキスト入力ボックス）を作成しようとしていますが、テキストは非表示になります。

ボックスを表示する必要があるため、そうしvisibility: hidden;ないdisplay: none;とうまくいきません。

背景は単色ではないため、テキストを背景と同じ色にすることはできません。残りの入力が表示されたまま、テキストを非表示にする必要があります。

私が達成しようとしている効果は、端末にパスワードを入力し、入力を受け入れるがフィードバックが表示されないときのようなものです（ただし、これはパスワード用ではありません）。

4

3 に答える 3

5

背景は単色ではないため、テキストを背景と同じ色にすることはできません。

transparent色はどうですか？

これは役に立ちますか？

input[type="text"] {
  color: transparent;
}

JSBin デモ #1

アップデート：

@Shomz のアイデアを実装しました。カーソルを先頭に置いておくか、すべての文字を*. 私はjQueryイベントをバインドするために使用しました：

jQuery バージョン:

var holder = [], exceptions = [13];

var hideChar = function(elm) {
  elm.value = '';
  // Or
  // elm.value = elm.value.replace(/[^*]/,  '*');
};

$('#console').keydown(function(e) {
  if (e.which === 8) {
    holder.pop();
  }

}).keypress(function(e) {
  if ($.inArray(e.which, exceptions) === -1) {
    holder.push(String.fromCharCode(e.which));
  }
  var _this = this;
  setTimeout(function() {
    hideChar(_this);
  }, 1);

}).keyup(function() {
  $('#holder').val(holder.join(''));
});

HTML:

<input id="console" type="text" value="">
<input id="holder" type="hidden">

JSBin デモ #2

純粋な JavaScript バージョン? もちろん！

それは長い話です。デモを確認してください。

JSBin デモ #3

于 2013-08-10T17:52:02.810 に答える
2

常にフィールドの先頭にカーソルを置きたい (ユーザーが何かを入力するときに空白を表示しない) 場合は、JavaScript を使用して入力文字を別の入力フィールドに送信し、タイプを非表示に設定してクリアすることができます。同時に元の入力フィールド。そのためには keyUp リスナーが必要です。

また、HTML/CSS に固執したい場合は、テキストの色を背景色と同じに設定するしか方法はありませんが、カーソルが移動し、上記で説明した空白が表示されます ( @Hashemの答え）。

于 2013-08-10T17:52:12.987 に答える
1

入力フィールドの色を透明に設定してみましたか?

<input style="color:transparent;"></input>
于 2013-08-10T17:53:05.587 に答える