0

入力ボックスがあります。入力ボックスをクリックすると、入力ボックスの近くにテキストが表示されるようにしたいのですが、OUT入力ボックスをクリックすると、テキストが消えます...

私はこれを試しましたが、動作しますが完全ではありません:

<style type="text/css">
.hidden {display:none} 
</style>

それから

<input name="title" type="text" id="title" onclick="document.getElementById ('TEXT_CLASS').className = document.getElementById ('TEXT_CLASS').className == 'hidden' ? '' : 'hidden'" />

それから

<span id="TEXT_CLASS" class="hidden">the text that I want to appear on click</span>

これはすべて機能しますが、クリックしてもテキストが消えず、テキストが切り替わるだけです..

「オンクリック」したときにのみテキストを表示し、「クリックアウト」したときにのみテキストを非表示にするのを手伝ってもらえますか?

ありがとうございました

4

4 に答える 4

1

クリックアウトと言うときは、テキストボックスがフォーカスを失うことを意味していると思いますblur..次に、onblur イベントを実装する必要があります。

以下のように実装する必要がonfocusありonblurます。

<input name="title" type="text" id="title" 
   onfocus="document.getElementById('TEXT_CLASS').className = ''";
   onblur=" document.getElementById('TEXT_CLASS').className = 'hidden';"
/>

おそらく、以下のようにこれを行うことを検討する必要があります。

   <input name="title" type="text" id="title" />
   <span id="TEXT_CLASS" class="hidden">Test Class</span>

   <script>
      var titleEl = document.getElementById('title');
      var textSpanEl = document.getElementById('TEXT_CLASS');

      titleEl.onfocus = function () {
          textSpanEl .className = '';
      }

      titleEl.onblur = function () {
          textSpanEl .className = 'hidden';
      }
   </script>

デモ: http://jsfiddle.net/LyKze/

于 2012-06-07T18:07:07.533 に答える
0

スパンの可視性を切り替える JavaScript 関数を作成することをお勧めします。

function setVisilibity(span, visible)
{
    span.style.display = visible ? "block" : "none";
}
于 2012-06-07T18:09:33.403 に答える
0

TEXT_CLASS をデフォルトで非表示に設定してから、次の操作を行います

$("#title").focus(functiion(){
   $("#TEXT_CLASS").show();
});
于 2012-06-07T18:14:12.897 に答える
0

jQueryを使用している場合は、次のようなことができます

$('#title').click(function(){ 
     $('#TEXT_CLASS').css('display', $('#TEXT_CLASS').is(':visible') ? 'none' : 'block'); 
})
于 2012-06-07T18:07:23.453 に答える