需要在文本編輯器來調整字段後，我輸入的東西

所以我做一個文本編輯器，但我需要做的是需要在文本編輯器來調整字段後，我輸入的東西

1）當我鍵入說「Col1中」後來我一按空格鍵它應爲「第1欄」

我是新來的HTML和JS自動完成，看見的onkeyup一些例子和監視事件，但它似乎沒有滿足或我可能會得到一些錯誤

任何幫助將深受讚賞

順便說一句，使用NicEdit作爲基地

我的HTML

<html> 
 
<head> 
 
\t <title>Custom Text Editor</title> 
 
</head> 
 
<body> 
 

 
<div id="menu"></div> 
 

 
<div id="intro"> 
 
By calling the nicEditors.allTextareas() function the below example replaces all 3 textareas on the page with nicEditors. NicEditors will match the size of the editor window with the size of the textarea it replaced. 
 
</div> 
 
<br /> 
 

 
<div id="sample"> 
 
<script type="text/javascript" src="../nicEdit.js"></script> 
 
<script type="text/javascript"> 
 
\t bkLib.onDomLoaded(function() { nicEditors.allTextAreas() }); 
 
</script> 
 

 
<h4>Rich Text</h4> 
 
<textarea name="area1" cols="40" style="width: 100%" onkeyup="myFunction()"></textarea> 
 
<br /> 
 

 
<h4>Second Textarea</h4> 
 
<textarea name="area2" style="width: 100%;"> 
 
\t Some Initial Content was in this textarea 
 
</textarea> 
 
<br /> 
 

 
<h4>Third Textarea</h4> 
 
<textarea name="area3" style="width: 300px; height: 100px;"> 
 
\t HTML <b>content</b> <i>default</i> in textarea 
 
</textarea> 
 
</div> 
 

 
</body> 
 
</html> 
 

 
<script> 
 

 
function myFunction() { var x = document.getElementById("a").value; document.getElementById("abc").innerHTML = x; } 
 

 
</script>

來源

2017-01-02 Venky

由於您使用nicEdit無法附加功能的onkeydown = 「myFunction的（這一點，事件）」到textarea的名字= 「區域1」元素。

這是因爲nicEdit會更改您的DOM並在所有運行的位置創建div contenteditable。

因此，您可以將keydown事件委託給父分區樣本。

document.getElementById('sample').addEventListener('keydown', function(e) { 
    if (e.target.tagName == 'DIV' && e.target.classList.contains('nicEdit-main')) { 
     e.stopPropagation(); 
     myFunction(e.target, e); 
    } 
});

爲了您myFunction的你可以使用不同的方法來獲取插入符的位置，變化的文字和更新。

的例子：

function myFunction(obj, e) { 
 
    // get the pressed key 
 
    var charCode = e.keyCode || e.which; 
 
    // covert the keycode to char 
 
    var charStr = String.fromCharCode(charCode); 
 
    // if a space 
 
    if (charStr == ' ') { 
 
    // get current position inside the textarea 
 
    var startPoint = window.getSelection().anchorOffset; 
 
    var node = window.getSelection().anchorNode; 
 
    // check if the previous 4 chars are Col1 
 
    if (node.nodeValue.substr(startPoint - 4, 4) == 'Col1') { 
 
     // discard the space pressed 
 
     e.preventDefault(); 
 
     // adjust the text 
 
     node.nodeValue = node.nodeValue.substr(0, startPoint - 1) + 'umn 1' + node.nodeValue.substr(startPoint); 
 
     obj.focus(); 
 
     var range = document.createRange(); 
 
     range.setStart(node, startPoint + 4); 
 
     range.setEnd(node, startPoint + 4); 
 
     var sel = window.getSelection(); 
 
     sel.removeAllRanges(); 
 
     sel.addRange(range); 
 
    } 
 
    } 
 
} 
 

 
bkLib.onDomLoaded(function() { 
 
    nicEditors.allTextAreas() 
 
}); 
 

 

 
document.getElementById('sample').addEventListener('keydown', function(e) { 
 
    if (e.target.tagName == 'DIV' && e.target.classList.contains('nicEdit-main')) { 
 
    e.stopPropagation(); 
 
    myFunction(e.target, e); 
 
    } 
 
});

<script src="http://js.nicedit.com/nicEdit-latest.js"></script> 
 
<div id="menu"></div> 
 

 
<div id="intro"> 
 
    By calling the nicEditors.allTextareas() function the below example replaces all 3 textareas on the page with 
 
    nicEditors. NicEditors will match the size of the editor window with the size of the textarea it replaced. 
 
</div> 
 
<br/> 
 

 
<div id="sample"> 
 

 
    <h4>Rich Text</h4> 
 
    <textarea name="area1" cols="40" style="width: 100%"></textarea> 
 
    <br/> 
 

 
    <h4>Second Textarea</h4> 
 
<textarea name="area2" style="width: 100%;"> 
 
\t Some Initial Content was in this textarea 
 
</textarea> 
 
    <br/> 
 

 
    <h4>Third Textarea</h4> 
 
<textarea name="area3" style="width: 300px; height: 100px;"> 
 
\t HTML <b>content</b> <i>default</i> in textarea 
 
</textarea> 
 
</div>

來源

2017-01-02 15:05:03 gaetanoM

非常感謝您的答覆，邏輯似乎是正確的，但我想我沒有得到文本字段ID正確，所以它沒有得到應用，而檢查文本字段時，它顯示我一個div，但它沒有顯示在我的HTML代碼：/ – Venky

使用此簡單的輸入文本字段的作品，但就像我說我的HTML代碼中沒有可見的文本字段ID，但顯示我一個，當我嘗試通過鉻瀏覽器檢查該字段，我應該添加這個js腳本？ – Venky

@Venky Answer更新。立即嘗試並讓我知道。一開始我不明白你正在使用nicEdit插件。 – gaetanoM

我更改代碼一點點，啓動然後鍵入按下鍵並選項卡您可以使用jQuery UI爲

$(function() { 
 
    var projects = [ 
 
     { 
 
     value: "Column1", 
 
     label: "col1" 
 
     }, 
 
     { 
 
     value: "Column2", 
 
     label: "col2" 
 
     }, 
 
     { 
 
     value: "Column3", 
 
     label: "col3" 
 
     } 
 
    ]; 
 
     $("textarea").autocomplete({ 
 
     minLength: 0, 
 
     source: projects, 
 
     focus: function(event, ui) { 
 
     $(this).val(ui.item.label); 
 
     return false; 
 
     }, 
 
     select: function(event, ui) { 
 
     // $("textarea").val(ui.item.label); 
 
     $(this).val(ui.item.value); 
 
     
 
    
 
     return false; 
 
     } 
 
    }) 
 
    
 
    });

<html> 
 
<head> 
 
\t <title>Custom Text Editor</title> 
 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
</head> 
 
<body> 
 

 
<div id="menu"></div> 
 

 
<div id="intro"> 
 
By calling the nicEditors.allTextareas() function the below example replaces all 3 textareas on the page with nicEditors. NicEditors will match the size of the editor window with the size of the textarea it replaced. 
 
</div> 
 
<br /> 
 

 
<div id="sample"> 
 

 

 
<h4>Rich Text</h4> 
 
<textarea id="project" name="area1" cols="40" style="width: 100%" ></textarea> 
 
<br /> 
 

 
<h4>Second Textarea</h4> 
 
<textarea name="area2" style="width: 100%;"> 
 
\t Some Initial Content was in this textarea 
 
</textarea> 
 
<br /> 
 

 
<h4>Third Textarea</h4> 
 
<textarea name="area3" style="width: 300px; height: 100px;"> 
 
\t HTML <b>content</b> <i>default</i> in textarea 
 
</textarea> 
 
</div> 
 

 
</body> 
 
</html> 
 

 
<script> 
 

 
function myFunction() { var x = document.getElementById("a").value; document.getElementById("abc").innerHTML = x; } 
 

 
</script>

來源

2017-01-02 14:46:33

非常感謝您的reply..but即時尋找比其他自動完成的東西，像它應該儘快i型更改爲「第1列」「col1」和空間，是可能的？ – Venky

我更改了代碼，希望它有幫助 –

感謝您的回覆，使用id = ptoject在該特定區域不適用於文本字段:( – Venky

需要在文本編輯器來調整字段後，我輸入的東西

回答

相關問題