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