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

【问题标题】：convert paragraph or new elements into checkbox将段落或新元素转换为复选框
【发布时间】：2015-08-28 06:50:22
【问题描述】：

我有contenteditable div 作为文本编辑器

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

例如

案例一

如果用户写以下内容

Test1（按下回车键）

Test2（按下回车键）

Test3（按下回车键）

那么应该有Test1、Test2、Test3三个复选框

还有

案例2

当用户写入时

Parent1（按下回车键）

Test1（按下回车键）
Test2（按下回车键）
Test3（按下回车键）

在上述情况下，将有 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 应该被创建到复选框中。

如果有任何不同的方法可以满足创建复选框的要求/基本要求，这是最受欢迎的。

【问题讨论】：

在案例2中，你想在检测tab键时创建li元素？？？
点击任何按钮..

标签： javascript jquery html checkbox

【解决方案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>');
}

这是小提琴： http://jsfiddle.net/wLrfqvss/6/

希望这就是你要找的。p>

如果您希望仅对某些元素发生这种情况，您可以随时添加如下检查：

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

在上面的代码中。

【讨论】：

我没有修改您提供的任何代码。刚刚写了创建复选框的逻辑。你是否也面临输入框的问题？

【解决方案2】：

您可以为复选框使用模板而不是硬编码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 模板的灵活性，因为代码不是特定于控制的

【讨论】：

【解决方案3】：

几乎每个人都回答了第一个问题，但我找到了第二个问题的答案我在 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

【讨论】：

【解决方案4】：

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

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

    str = str.replace(/(<br>$)/,'')
             .replace(/(<br>)/g,'$1\n')
             .replace(/\* (.*)/g, '<li>$1</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">$1</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

【讨论】：

按下回车键时添加了空白复选框
已更新。请再次检查 jsfiddle。
我没有看到任何变化，即使现在在任何单词之间按下回车键上的空白复选框
在以前的版本中，当你在任何一行按回车时，它会在最后一行生成一个
。此版本不会在最后一行添加
。你期待什么结果？我现在很困惑。当一行是空白时，你期望什么？

【解决方案5】：

您好，我将您的 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

我希望它的工作方式与您正在寻找的一样......

【讨论】：