转换段落或新的元素融入复选框

我需要contenteditablediv为文本编辑器转换段落或新的元素融入复选框

功能是无论用户写入或复制/粘贴在文本编辑器变成复选框

为如

案例1

如果用户写入以下

的Test1（回车键按下）

的Test2（输入按键）

Test3的（回车键按下）

那么应该有三个复选框Test1，Test2，Test3分别

而且

情况2

当用户写入

Parent1（输入键按压）

测试1（输入键按压）
的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

基本上是一个新的跨越，DIV，BR标签或为此事李的应该创建成复选框。

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

来源

2015-06-12 Vaibs_Cool

在案例2中，您要创建在检测tab键'li'元素??? – dsaket

点击任何按钮.. –

几乎每个人都给予回答问题的第一例，但我发现答案对于第二种情况我加入这两条线在复选框SHOW内容的单击事件

我猜@arthi sreekumar也让我li's为checkbox Upvote。

$('.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

来源

2015-06-22 10:07:06

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

$('#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/

希望这是你在找什么。在上面的代码

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

：

如果你想做到这一点只有某些元素，你总是可以添加一个检查，像这样。

来源

2015-06-15 16:28:52

有一个输入被按下时有很多空间.. –

我没有修改任何你给的代码。只写了创建复选框的逻辑。您是否还面临输入框的问题？ –

最接近的答案.. –

如何使用*(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

来源

2015-06-16 04:03:30 North

添加了空白复选框作为输入键被按下 –

已更新。请再次检查jsfiddle。 – North

我没有看到任何变化，即使现在有空白复选框上的任何字之间按下输入键 –

您可以使用模板复选框，而不是在代码中硬编码的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) 
}

这也将提供给您的灵活性由于代码不是特定控件，因此模板为

来源

2015-06-16 06:51:19 Akshita

你好，我改变你的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

我希望它的工作有点像你要找的人..

来源

2015-06-19 11:32:57

转换段落或新的元素融入复选框

回答

相关问题