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

Question

我想要具有独特风格的 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 中，所以你可以用它来看看有什么问题。尝试点击“评论”。

Answer 1

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

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

我已经更新了你的 Fiddle：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('');
    }