將文本格式設置爲用戶輸入的內容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

回答

相關問題