jQuery專注於模糊數組

Question

**這不是任何IE9佔位符問題的重複。原因是，我使用的是WebWork的舊JSP框架不支持HTML中的佔位符。 **

我想做

我想顯示的字段中的值作爲placeholder文本是什麼。但是如果用戶開始輸入，佔位符文本應該消失。

問題

如果我輸入一些東西，然後點擊之外，我所輸入的獲取與佔位符文本替換。我想阻止它被替換。如果輸入爲空，則顯示佔位符文本，如果輸入有值，則不要替換文本。

限制

我也不能使用placeholder屬性的一些技術原因。 （舊的框架和需要支持IE9）。

希望你們可以幫忙。

var inputTextIDs = [ 
    [".hotelLocaiton", "Location"], 
    ["#agentTransfersSearchForm_filter_transfersName", "Location2"] 
]; 

$.each(inputTextIDs, function(i, v) { 
    //$('input'+inputTextIDs[i][0]).val(inputTextIDs[i][1]); 
    $('input' + inputTextIDs[i][0]).on('change', function() { 
     var inputValue = $.trim($('input' + inputTextIDs[i][0]).val()); 
     $('input' + inputTextIDs[i][0]).val(inputTextIDs[i][1]); 
     $('input' + inputTextIDs[i][0]).on('focus', function() { 
      $('input' + inputTextIDs[i][0]).val(''); 
     }).on('blur', function() { 
      $('input' + inputTextIDs[i][0]).val(inputTextIDs[i][1]); 
     }); 
    }); 
}); 

Answer 1

var inputTextIDs = [ 
 
    [".hotelLocaiton", "Location"], 
 
    ["#agentTransfersSearchForm_filter_transfersName", "Location2"] 
 

 
]; 
 

 
$.each(inputTextIDs, function(i, v) { 
 

 
    $('input' + inputTextIDs[i][0]).on('focus', function() { 
 
    if ($('input' + inputTextIDs[i][0]).val() == inputTextIDs[i][1]) { 
 
     $('input' + inputTextIDs[i][0]).val(''); 
 
    } 
 
    }).on('blur', function() { 
 
    if (!$('input' + inputTextIDs[i][0]).val()) { 
 
     $('input' + inputTextIDs[i][0]).val(inputTextIDs[i][1]); 
 
    } 
 
    }); 
 

 

 
    $('input' + inputTextIDs[i][0]).val(inputTextIDs[i][1]); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<input class="hotelLocaiton" /> 
 
<input id="agentTransfersSearchForm_filter_transfersName" />

Answer 2

您可以使用focusin和focusout：

var inputTextIDs = [ 
 
    [".hotelLocaiton", "Location"], 
 
    ["#agentTransfersSearchForm_filter_transfersName", "Location2"] 
 
]; 
 

 
$.each(inputTextIDs, function(i, v) { 
 
    $(v[0]).val(v[1]).focusin(function() { 
 
    if ($(this).val() == v[1]) { 
 
     $(this).val(''); 
 
    } 
 
    }).focusout(function() { 
 
    if ($(this).val() == '') { 
 
     $(this).val(v[1]); 
 
    } 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<input class="hotelLocaiton" /> 
 
<input id="agentTransfersSearchForm_filter_transfersName" />

Answer 3

你可以試試本作正是你想要它也W¯¯請求密碼字段。

var inputTextIDs = [ 
 
    [".hotelLocaiton", "Location"], 
 
    ["#agentTransfersSearchForm_filter_transfersName", "Location2"] 
 

 
]; 
 

 
$.each(inputTextIDs, function(i, v) { 
 
    var placeholderValue = inputTextIDs[i][1]; 
 
    $('input' + inputTextIDs[i][0]).val(placeholderValue); 
 
    
 
    if($('input' + inputTextIDs[i][0]).attr("type")=="password"){ 
 
    $('input' + inputTextIDs[i][0]).attr("original-type","password"); 
 
    $('input' + inputTextIDs[i][0]).attr("type","text"); 
 
    } 
 
    
 
    $('input' + inputTextIDs[i][0]).on('change', function() {  
 
    if ($(this).val().trim() == "") { 
 
     $(this).val(placeholderValue); 
 
     
 
     if($(this).attr("type")=="password"){ 
 
     $(this).attr("type","text"); 
 
     } 
 
    } 
 
    else{ 
 
     if($(this).attr("original-type")=="password"){ 
 
     $(this).attr("type","password"); 
 
     } 
 
    } 
 
    }); 
 

 
    $('input' + inputTextIDs[i][0]).on('focus', function() { 
 
    if ($(this).val().trim() == placeholderValue) { 
 
     $(this).val(''); 
 
     
 
     if($(this).attr("original-type")=="password"){ 
 
     $(this).attr("type","password"); 
 
     } 
 
    } 
 
    }).on('blur', function() { 
 
    if ($(this).val().trim() == "") { 
 
     $(this).val(placeholderValue); 
 
     
 
     if($(this).attr("type")=="password"){ 
 
     $(this).attr("type","text"); 
 
     } 
 
    } 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<input class="hotelLocaiton" /> 
 
<input id="agentTransfersSearchForm_filter_transfersName" type="password" />