将文本格式设置为用户输入的内容div

我试图制作一个允许用户输入文本的页面，它会自动格式化输入 - 就像剧本格式（类似于亚马逊的StoryWriter）。将文本格式设置为用户输入的内容div

到目前为止，我可以使用“：contains（'示例文本'）”检查文本并添加/删除类。问题是所有下面的p标签都继承了这个类。

到目前为止，我的解决方案是使用.next（）删除我添加的类，但由于脚本中可能需要换行符（例如在对话框中），因此这是有限的，并且会删除对话框类。

$('.content').on('input', function() { 
    $("p.input:contains('INT.')").addClass("high").next(".input").removeClass("high"); 
    $("p.input:contains('EXT.')").addClass("high").next(".input").removeClass("high"); 
});

我不能让||在：contains参数中工作，但这是我的问题中最少的。

我有一个JS fiddle

我已经为此工作了一段时间了，如果我可以改变只包含文本节点（INT。EXT或者在这个例子中）和单独离开休息这将工作，我可以将其应用于脚本的其余部分。

任何帮助将不胜感激，我是新来的stackoverflow，所以谢谢。

来源

2016-01-04 cPatton

欢迎SO，@cPatton！你能否详述一下你想达到的目标？至少我很难得到我的头脑。 – jsruok

您是否只希望其中一个输入段“（p.input）”在任何时候都高亮显示？ – Yass

对不起，我迟迟不回答你的问题（工作和东西）。我很欣赏回答的兴趣。 @jsruok我试图写一个电影脚本格式在contenteditable div（每行后输入被压入包装在p标签）。场景标题（全部大写），叙述描述和对话框都有不同的风格。我试图让用户输入指示样式的东西（例如场景标题的INT或EXT），以便将该样式应用于边距和文本变换（例如大写）。问题是，当我应用样式时，它会在所有p标签之后进行更改。 – cPatton

请参阅下面代码中的注释，了解正在发生的事情。

Fiddle Example

JQuery的

var main = function(){ 

    var content = $('.content'); 

    content.on('input', function() { 
    $("p.input").each(function() { 
     //Get the html content for the current p input. 
     var text = $(this).html(); 
     //indexOf will return a positive value if "INT." or "EXT." exists in the html 
     if (text.indexOf('INT.') != -1 || text.indexOf('EXT.') != -1) { 
     $(this).addClass('high'); 
     } 
     //You could include additional "if else" blocks to check and apply different conditions 
     else { //The required text does not exist, so remove the close for the current input 
     $(this).removeClass('high'); 
     } 
    }); 
    }); 
};//main close 

$(document).ready(main);

来源

2016-01-07 14:04:53 Yass

这个，这个在这里真棒。非常感谢。我真的很感谢你的帮助 – cPatton

显然我不能up答案，因为我没有声望，但如果我能我肯定。再次感谢！ – cPatton

将文本格式设置为用户输入的内容div

回答

相关问题