更改模糊/焦點上的輸入/文字的值

Question

我還有另外一個問題。我想這只是一個愚蠢的錯誤，但我只是不明白。所以也許你可以幫助我。 我有幾個帶有「默認」值的文本輸入字段。在該字段中點擊消除值並且用戶可以插入數據。在模糊的情況下，如果該字段爲空，則應該再次出現「默認」值。 這隻適用於，如果我立即向場地模糊場地。如果我在框中寫入內容，模糊並再次聚焦並刪除所有文本和模糊，則不再有效。

的jQuery的代碼如下：

這裏是我的代碼小提琴：http://jsfiddle.net/xQ7jt/ 那是我的聚焦功能。代碼的其餘部分是在小提琴

$(document).on('focus', '.insert_adresse', function() { 
      // $(this).css('background-color', 'yellow'); 
      $(this).attr('value', ''); 
     }); 

Answer 1

http://jsfiddle.net/wrxsti85/xQ7jt/3/

嘗試使用標記爲這個來代替。這也是瀏覽器兼容性友好的選擇。 placeholder="Your text here..."會爲你節省一些時間。

<input type="text" id="input_text_hhnr" class="insert_adresse" name="hhnr" placeholder="Hausnummer" /> 

Answer 2

您可以添加一個全局變量來存儲您的默認值，所以首先你的foreach所有的輸入您存儲輸入ID作爲全局密鑰，然後在輸入模糊的情況下，如果輸入爲空，則用全局值（默認值）替換該值。

工作例如：fiddle

var global = []; 

$(document).ready(function(){ 
    $('input').each(function(k,v){ 
    global[$(v).attr('id')] = $(v).attr('value'); // insert the default value into the Global key with the input ID attr 
    }); 
}); 

$(document).on('focus', '.insert_adresse', function() { 
     // $(this).css('background-color', 'yellow'); 
     $(this).attr('value', ''); 
    }); 

$(document).on('blur', '.insert_adresse', function() { 
     // $(this).css('background-color', 'white'); 
     var value=$(this).val(); 
     // alert(value); 
     var id=$(this).attr('id'); 
     if (value == '') { 
      $(this).val(global[$(this).attr('id')]); // get the value with the input id attr 
     } 
     // alert(value); 
     $(this).attr('value', value); 
    }); 

Answer 3

我已經更新了小提琴。 http://jsfiddle.net/xQ7jt/2/

請檢查這是你想要的。

$(document).on('focus', '.insert_adresse', function() { 
     // $(this).css('background-color', 'yellow'); 
     $(this).val(''); 
    }); 

$(document).on('blur', '.insert_adresse', function() { 
     // $(this).css('background-color', 'white'); 
     var value=$(this).val(); 
     var id=$(this).attr('id'); 
     if (value.length == 0) { 
     // alert('empty'); 
//   alert(id); 
      if (id=='input_text_strasse') { 
       value='Straße'; 
      } else { 
       if (id=='input_text_hhnr') { 
        value='Hausnummer'; 
       } else { 
        if (id=='input_text_hhnrzusatz') { 
         value='Hausnummerzusatz'; 
        } else { 
         if (id=='input_text_plz') { 
          value='Postleitzahl'; 
         } else { 
          if (id=='input_text_ort') { 
           value='Gemeinde'; 
          } else { 
           // alert('here we go'); 
          } 
         } 
        } 
       } 
      } 
      $(this).val(value); 
     } 
     // alert(value); 

    }); 

Answer 4

下面是一個使用佔位符（無JS）的例子：http://jsfiddle.net/xQ7jt/4/

下面是另一個例子，用更清潔和更簡單的JS：http://jsfiddle.net/xQ7jt/5/

$(document).on('focus', '.insert_adresse', function() { 
    $(this).val($(this).val() === $(this).data('default') ? '' : $(this).val()); 
}); 

$(document).on('blur', '.insert_adresse', function() { 
    $(this).val($(this).val() || $(this).data('default')); 
}); 

$(function() { 
    $('.insert_adresse[data-default]').each(function() { 
     $(this).val($(this).data('default')); 
    }); 
});