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