如何通過更改JQuery值 <Input> 動態地？

Question

下面的小提琴將文本轉換為段落，問題是JQuery函數的屬性chunkSize = 100; 當前定義每個分割段落要包含的字符數。

用戶是否可以通過使用<input>和<button>來動態更改此設置，從而使用戶能夠為每個動態段落鍵入所需的字符並將其應用？

小提琴

如果可以提供一個新的小提琴，那將不勝感激，因為我還是編碼新手。

謝謝！

 $(function() { $('select').on('change', function() { //Lets target the parent element, instead of P. P will inherit it's font size (css) var targets = $('#content'), property = this.dataset.property; targets.css(property, this.value); sameheight('#content p'); }).prop('selectedIndex', 0); }); var btn = document.getElementById('go'), textarea = document.getElementById('textarea1'), content = document.getElementById('content'), chunkSize = 100; btn.addEventListener('click', initialDistribute); content.addEventListener('keyup', handleKey); content.addEventListener('paste', handlePaste); function initialDistribute() { var text = textarea.value; while (content.hasChildNodes()) { content.removeChild(content.lastChild); } rearrange(text); } function rearrange(text) { var chunks = splitText(text, false); chunks.forEach(function(str, idx) { para = document.createElement('P'); para.classList.add("Paragraph_CSS"); para.setAttribute('contenteditable', true); para.textContent = str; content.appendChild(para); }); sameheight('#content p'); } function handleKey(e) { var para = e.target, position, key, fragment, overflow, remainingText; key = e.which || e.keyCode || 0; if (para.tagName != 'P') { return; } if (key != 13 && key != 8) { redistributeAuto(para); return; } position = window.getSelection().getRangeAt(0).startOffset; if (key == 13) { fragment = para.lastChild; overflow = fragment.textContent; fragment.parentNode.removeChild(fragment); remainingText = overflow + removeSiblings(para, false); rearrange(remainingText); } if (key == 8 && para.previousElementSibling && position == 0) { fragment = para.previousElementSibling; remainingText = removeSiblings(fragment, true); rearrange(remainingText); } } function handlePaste(e) { if (e.target.tagName != 'P') { return; } overflow = e.target.textContent + removeSiblings(fragment, true); rearrange(remainingText); } function redistributeAuto(para) { var text = para.textContent, fullText; if (text.length > chunkSize) { fullText = removeSiblings(para, true); } rearrange(fullText); } function removeSiblings(elem, includeCurrent) { var text = '', next; if (includeCurrent && !elem.previousElementSibling) { parent = elem.parentNode; text = parent.textContent; while (parent.hasChildNodes()) { parent.removeChild(parent.lastChild); } } else { elem = includeCurrent ? elem.previousElementSibling : elem; while (next = elem.nextSibling) { text += next.textContent; elem.parentNode.removeChild(next); } } return text; } function splitText(text, useRegex) { var chunks = [], i, textSize, boundary = 0; if (useRegex) { var regex = new RegExp('.{1,' + chunkSize + '}\\\\b', 'g'); chunks = text.match(regex) || []; } else { for (i = 0, textSize = text.length; i < textSize; i = boundary) { boundary = i + chunkSize; if (boundary <= textSize && text.charAt(boundary) == ' ') { chunks.push(text.substring(i, boundary)); } else { while (boundary <= textSize && text.charAt(boundary) != ' ') { boundary++; } chunks.push(text.substring(i, boundary)); } } } return chunks; } 

 #text_land { border: 1px solid #ccc; padding: 25px; margin-bottom: 30px; } textarea { width: 95%; } label { display: block; width: 50%; clear: both; margin: 0 0 .5em; } label select { width: 50%; float: right; } * { box-sizing: border-box; padding: 0; margin: 0; } body { font-family: monospace; font-size: 1em; } h3 { margin: 1.2em 0; } div { margin: 1.2em; } textarea { width: 100%; } button { padding: .5em; } p { /*Here the sliles for OTHER paragraphs*/ } #content p { font-size: inherit; /*So it gets the font size set on the #content div*/ padding: 1.2em .5em; margin: 1.4em 0; border: 1px dashed #aaa; overflow: hidden; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <h3>Import Text below, then press the button</h3> <textarea id="textarea1" placeholder="Type text here, then press the button below." rows="5"> </textarea> <input style="width:200px;" placeholder="Custom Characters per box"> <button> Go </button> <br> <button style="width:200px;" id="go">Divide Text into Paragraphs</button> </div> <div> <h3 align="right">Divided Text Will Appear Below:</h3> <hr> <div id="content"></div> </div> 

Answer 1

輸入您的id 。

<input id="custom" placeholder="Custom Characters per box" style="width:200px;">

將以下代碼添加到initialDistribute函數中。

custom = parseInt(document.getElementById("custom").value); //Get value of the input.

chunkSize = (custom>0)?custom:100; //If Custom value is more than `0`, take that as `chunkSize` value else `100`

見小提琴

Answer 2

您可以使用input type="number"元素， button元素； 單擊button將chunkSize設置為input type="number" valueAsNumber屬性

html

  <label>chunkSize:<input class="chunkSize" type="number" /></label> 
  <button class="chunkSize">
  Set chunkSize
  </button>

javascript

  $("button.chunkSize").click(function(e) {
    var _chunkSize = $("input.chunkSize")[0].valueAsNumber;
    chunkSize = _chunkSize;
  })

jsfiddle https://jsfiddle.net/csz0ggsw/11/