jQueryは配列のぼかしを重視しています

Question

**これはIE9プレースホルダの問題の重複ではありません。その理由は、私が使用している古いJSPフレームワークであるWebWorkは、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

あなたは正確にあなたがしたいと、それはまた、ワットとしてこれを試すことができますパスワードフィールドのために頼む。

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" />