Question

我有另一个问题。我猜这只是一个愚蠢的错误，但我只是没有得到它。所以也许你可以帮助我。我有一些带有＆＃34;默认＆＃34; -value的文本输入字段。 onClick在字段中值disappers并且用户可以插入数据。如果字段为空，则模糊＆＃34;默认＆＃34; -value应再次出现。这只适用，如果我立刻向场地模糊。如果我在盒子上写东西，模糊，再次聚焦并删除所有文字和模糊，它就不再适用了。

jquery-code如下：

这是我的代码的一小部分：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

您可以添加一个全局变量来为您存储默认值，因此首先您预先输入所有输入并将输入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')); 
    });
});

更改模糊/焦点上的输入/文本值

4 个答案: