3

私はこの問題について昨日から頭を悩ませていましたが、解決できませんでした。私は Twitter Bootstrap を始めたばかりで、昨日まではすべてうまくいっていました。

最新の JQuery v1.11.1 と Twitter Bootstrap v3.3.1 を使用しています。昨日、ここから Bootstrap Tags Input をダウンロードしました: http://timschlechter.github.io/bootstrap-tagsinput/examples/

プラグインは機能し、ページ レイアウトに合わせて CSS スタイルを変更しましたが、フォーカス時にプレースホルダー属性が消えないという問題があります。タグを入力してコンマ値を追加すると、入力を開始するまでプレースホルダーが表示され、その後再び消えます。

JQuery onfocus 関数を使用して onfocus 時に属性を削除しようとしましたが、何もしません。私が達成したいのは、オンフォーカスのときにプレースホルダーがその時点で表示されないことです。

私の入力フィールドを以下に示します。

<input type="text" name="customer_tags" id="customer_tags" value="" placeholder="Enter you tags" data-role="tagsinput" required />

4

7 に答える 7

6

2年後、この問題を回避する方法を見つけました。まず、 DOM を調べると、新しい入力テキストが表示されます。これは、プレースホルダー テキストを継承しますが、以前に言及した onblur や onfocus の追加関数はありません。

<div class="bootstrap-tagsinput">
<input placeholder="text inherited from our input" size="23" type="text">
</div>

次に、この問題を修正するために、その入力を指す jquery 関数を作成する必要がありました。このような：

$('.bootstrap-tagsinput input').blur(function(){jQuery(this).attr('placeholder', '')})

クラス「bootstrap-tagsinput」を含む要素を指し、次に内部の「input」オブジェクトを指します。必要に応じて、.focus 関数も追加できます。私の場合、ユーザーがオブジェクトを離れ、入力タグがプレースホルダーなしできれいに見えるときに機能します。

于 2016-12-20T19:31:22.387 に答える
2

HTML5placeholder属性は、タグにフォーカスしても消えませんinput... 入力を開始したときにのみ消えます。これはデフォルトの動作です。

@ W3Schools でも見ることができます...

于 2014-12-16T11:34:08.280 に答える
0

これを試してください、うまくいくことを願っています：

<form>
  <div>
    <label for="name" class="left-label">Your Name</label>
    <input type="text" class="example-two" placeholder="Enter you tags" id="name" name="name">
  </div>
</form>

CSS:

[placeholder]:focus::-webkit-input-placeholder {
  transition: opacity 0.5s 0.5s ease; 
  opacity: 0;
}

.example-two:focus::-webkit-input-placeholder {
  transition: text-indent 0.5s 0.5s ease; 
  text-indent: -100%;
  opacity: 1;
}

body {

}
form {
  display: inline-block;
  margin-top: 20px;
}
label {
  display: block;
  text-align: left;
  font: bold 0.8em Sans-Serif;
  text-transform: uppercase;
}
.left-label {
  float: left;
  padding: 8px 5px 0 0;
}
input[type=text] {
  padding: 5px;
  text-indent: 0;
}
form div {
  margin: 20px;
  clear: both;
  text-align: left;
}

JSFiddle

編集: IE にも取り組んでいます: JSFiddle

于 2014-12-16T11:42:39.750 に答える
0

これがプラグインの動作です。「Enter」または「カンマ」を押すとすぐにスパンタグが作成され（添付の画像を参照）、入力が右にシフトします。したがって、入力には値がなく、プレースホルダーが表示されます。

ここに画像の説明を入力

彼らのドキュメントでは、 [confirmKeys を検索] と記載されています。

入力を入力するときにタグを追加するキーコードの配列。(デフォルト: [13, 188]、これは ENTER とコンマです)

入力時にタグの作成を削除するように確認キーを変更しますcomma

編集：

あなたのサイトで、コンソールで以下の方法を試してみましたが、うまくいきました。

$('input').tagsinput({
  confirmKeys: [13]
});

ここに画像の説明を入力

于 2014-12-16T12:03:50.933 に答える
0

In my case, after a little modification, it works fine.

$('#txtTimeSlot').on('change', function () {
        var len = $(this).tagsinput('items').length;
        if (len > 0) {

            var $input = $($(this).prev().children('input').get(0));
            $input.attr('placeholder', '');
        } else {

            var $input = $($(this).prev().children('input').get(0));
            $input.attr('placeholder', $(this).attr('placeholder'));
        }
    });
于 2018-02-28T07:42:23.163 に答える