jquery - jQuery onfocus onblurの問題

Question

とイベントが正常に動作しませonFocusん。onBlur

これが私が得たものです

var var1

$("input").focus(function() {

  var1 = $(this).val()

if ( $(this).val()==var1) {
       $(this).val('').css({'color': "#000", 'font-style': 'normal', 'font-weight': 'bold'});
   }  
    $(this).css({'background-color':'#d7df23' });    
});

$("input").blur(function() {
   if ( $(this).attr("value")=="") {
       $(this).val(var1).css({'color': "#666", 'font-style': 'italic', 'font-weight': 'normal'});
   }   
    $(this).css({'background-color':'#EEEEEE' });      
});

そして、これが私のHTMLです

<input type="text" id="tbTitle" value="Title">

<input type="text" id="tbTitle1" value="Title1">

<input type="text" id="tbTitle2" value="Title2">

これは、テキストボックスの値を変更しない場合に機能します。

基本的に、入力の元の値を取得して var に格納し、フィールドが空白の場合は元の値に戻します。

現時点では、テキストボックスにあるものの値をフォーカスしています

元の値を保存し、それを変更する方法はありonBlurますか?

ここに私のjsfiddleへのリンクがあります

score 5 · Accepted Answer

これが私の解決策です...

http://jsfiddle.net/Sohnee/YTTD5/4/

またはコードで...

var originalValues = new Array();

$("input").focus(function() {

    if (!originalValues[this.id]) {
      originalValues[this.id] = $(this).val()
    }

    if ( $(this).val()==originalValues[this.id]) {
           $(this).val('').css({'color': "#000", 'font-style': 'normal', 'font-weight': 'bold'});
       }  
        $(this).css({'background-color':'#d7df23' });    
   });

    $("input").blur(function() {
       if ( $(this).attr("value")=="") {
           $(this).val(originalValues[this.id]).css({'color': "#666", 'font-style': 'italic', 'font-weight': 'normal'});
       }   
        $(this).css({'background-color':'#EEEEEE' });      
   });

score 0 · Accepted Answer

問題は、初期設定ではなく、フォーカスの瞬間に入力値を保存することです。このコードは役立つ場合があります。

var initials ={};
$(document).ready(function(){
  $('input').each(function(){
    initials[this.id] = $(this).attr('value');
  });
});

$('input').focus(function(){
  // do whatever you want to
});

$('input').blur(function(){
  if($(this).attr('value')==''){
    $(this).attr('value', initials[this.id]);
  }
  // do other stuff
});

score 0 · Accepted Answer

初期設定をvar var1 = null;試してから、フォーカストリガーが最初に設定するだけで、var1 = var1 ?? $(this).val();毎回値をオーバーライドし続けるように見える場合、元の値をグローバル変数ではなく実際のオブジェクトのデータとして保存することを検討することもできます

score 0 · Accepted Answer

1 つのを使用していますvar1が、複数のテキストボックスを使用しています。そのvar1ため、テキストボックスを離れたときに、別のテキストボックスに入力することで殴打されます。var1また、要素の値をそれに対してテストする前にに割り当てているため、==常に true になります。

「入力の元の値を取得して変数に保存し、フィールドが空白の場合は元の値を戻す」には、次のようにします。

var values = {};

$("input").focus(function() {

    var $this = $(this);

    // Save the value on focus
    values[this.id] = $this.val();

}).blur(function() {

    var $this = $(this);

    // Restore it on blur
    if ($this.val() == "") {
        $this.val(values[this.id]);
    }

});

上記の CSS については省略しました。なぜなら、それで何をしたいのかが明確ではなかったからです。追加するのは簡単です。

score 0 · Accepted Answer

CSのものはありません..「rel」属性に値を戻す値を持つフィールドを入力した場合。フィールドの終了時に、値が空の場合、rel 属性にある可能性のあるものをコピーします。これは何もないか、最初のフォーカスに存在していた値です。

$("input").focus(function() {
 if($(this).val()!=''){
  $(this).attr('rel',$(this).val());
 }
});

$("input").blur(function() {
 if($(this).val()==''){
  $(this).val($(this).attr('rel'));
 }
});

jquery - jQuery onfocus onblurの問題

5 に答える 5

Related

Reference