将段落或新元素转换为复选框

Question

我有 contenteditable div 作为 文本编辑器

所需的功能是用户编写的任何内容或 copy/paste 在文本编辑器中变成复选框

例如

Case 1

如果用户写了以下内容

测试 1（按下回车键）

测试 2（按下回车键）

测试 3（按下回车键）

那么Test1、Test2、Test3三个checkbox

和

Case2

当用户写

Parent1（按下回车键）

Test1（按下回车键）
测试 2（按下回车键）
测试 3（按下回车键）

在上面的例子中会有 4 个复选框 parent1 和 3 个 li's

我已经取得的成就，但我愿意接受更准确的新方法。

$('#checkbox').click(function() {
var $p = "";  
     var re = /\S/;
     $p = $('.outputBox');
      $p.contents()
      .filter(function() {    
        return this.nodeType == 3&& re.test(this.nodeValue);;  
     })
    .wrap('<label> <input type="checkbox" name="field_1" value="on" />')
});

FIDDLE Demo

基本上是一个新的 span，div，br 标签或者 li 应该被创建到复选框中。

如果有任何不同的方法可以满足创建复选框的 requirement/basic 要求，我们非常欢迎。

Answer 1

这是一个可能的解决方案。我遍历了最里面的文本元素，然后将其转换为复选框。

$('#checkbox').click(function() {
     var $p = "";  
     $p = $('.outputBox');
     wrapText($p);
});

function wrapText(domObj) {
    var re = /\S/;
    domObj.contents().filter(function() {
        if (this.nodeType === 1) {
            wrapText($(this));
        } else {
            return (this.nodeType === 3 && re.test(this.nodeValue));
         }
    })
    .wrap('<label> <input type="checkbox" name="field_1" value="on" /></label>');
}

这是 fiddle： http://jsfiddle.net/wLrfqvss/6/

希望这就是您要找的。

如果您希望只对某些元素发生这种情况，您总是可以像这样添加检查：

if (this.nodeType === 1 && this.tagName === 'DIV')

在上面的代码中。

Answer 2

用*(space)生成li怎么样？我使用正则表达式和处理字符串来生成它。

function update() {
    var str = $('#inputBox').html();
    $('#outputBox').html(str);
    $('#showHTML').text(str);

    str = str.replace(/(<br>$)/,'')
             .replace(/(<br>)/g,'\n')
             .replace(/\* (.*)/g, '<li></li>')
             .replace(/^(?!<li>)/gm,'<input type="checkbox" name="field_1" value="on">')
             .replace(/^<li>(.*)<\/li>/gm,'<li><input type="checkbox" name="field_1" value="on"></li>');

    if(str.indexOf('<li>')!=-1) {
        var index = str.indexOf('<li>');
        var lastIndex; 
        str = str.substring(0, index) + '<ul>' + str.substring(index);        
        lastIndex = str.lastIndexOf('</li>') +  '</li>'.length+  1;
        str = str.substring(0, lastIndex) + '</ul>' + str.substring(lastIndex);
    }
    $('#translatedBox').html(str);
    $('#translatedHTML').text(str);
}

这是jsfiddle

Answer 3

您可以为复选框使用模板而不是硬编码html

<div id="template" style="visibility:hidden">
<label> <input type="checkbox" name="field_1" value="on" /></label>
</div>

在代码中

$('#checkbox').click(function() {});

 function createElement()
{
 var targetElement=$("#template").clone(true);
 targetElement.removeAttr("style");
 targetElement.attr("name","new id");
 var $p = "";  
 var re = /\S/;
 $p = $('.outputBox');
  $p.contents()
  .filter(function() {    
    return this.nodeType == 3&& re.test(this.nodeValue);;  
 })
.wrap(targetElement)
}

这也将为您提供使用任何 html 模板的灵活性，因为代码不是特定控件

Answer 4

您好，我将您的js代码更改如下，

$('div[contenteditable=true]').blur(function() {



    $('.outputBox').append('<br>').append("<input type='checkbox' value='"+$(this).html()+"' />"+$(this).html());
$(this).html("");

 });




$('div[contenteditable=true]').keydown(function(e) {
    //$('.outputBox').html($(this).html()); i commented this line

我希望它能像您正在寻找的那样工作..

Answer 5

几乎每个人都回答了第一个问题，但我找到了第二个问题的答案我在 SHOW CONTENT with CHECKBOX

的点击事件中添加了这两行

我想 @arthi sreekumar 也让我 li's 进入 checkbox 赞成。

 $('.outputBox').find("ol").find("li").wrapInner(('<label style="display:block;"> <input type="checkbox" class="liolChk" name="field_1" value="on" />')); 
 $('.outputBox').find("ul").find("li").wrapInner(('<label style="display:block;"> <input type="checkbox" class="liolChk" name="field_1" value="on" />'));

Fiddle Demo

将段落或新元素转换为复选框

convert paragraph or new elements into checkbox

html

javascript

checkbox

jquery