如何将HTML包含到jEditable占位符中?

时间:2014-06-19 09:26:27

标签: javascript jquery html jeditable

我想让jEditable占位符具有独特的风格,所以我尝试将简单的span包含到placeholder属性中,它看起来和我预期的一样,但是,点击它就像默认值一样工作但是在输入框中将占位符的内容显示为原始HTML代码:

$(function() {
     $(".testjedit").each(function() {
            var old_value = $(this).attr( 'data-default' );
            var ph = $(this).attr( 'data-placeholder' );

            $(this).editable("http://localhost/index.php/welcome/update_record", { 
              "callback": function( value, settings ) {                              
                $( this ).attr('data-default', value );
              },
              "placeholder": "<span class='ph'>" + ph + "</span>",
              "submitdata": { 
                "oldvalue": old_value,
                "check": 1
              }
            }); 
     });
});

我把它全部放在jsfiddle中,所以你可以玩它来看看有什么不对。尝试点击“评论”。

1 个答案:

答案 0 :(得分:2)

jEditable中似乎有一个小错误。您可以使用HTML作为占位符,但不要在属性中使用单引号。

//  "placeholder": "<span class='ph'>" + ph + "</span>",
    "placeholder": '<span class="ph">' + ph + '</span>',

我更新了你的小提琴:http://jsfiddle.net/8b8nH/10/

据我所知,此时匹配失败:

/* Remove placeholder text, replace is here because of IE. */
if ($(this).html().toLowerCase().replace(/(;|"|\/)/g, '') == 
    settings.placeholder.toLowerCase().replace(/(;|"|\/)/g, '')) {
       $(this).html('');
    }