2016-05-06 47 views
0

下面的小提琴將文本轉換爲段落,問題在於JQuery函數屬性chunkSize = 100;當前定義了要包含的每個分割段落的字符數量。如何通過<Input>動態更改jQuery值?

用戶是否可以通過使用<input><button>來動態更改此設置,其中用戶可以爲每個動態段落鍵入所需字符並應用它?

Fiddle

如果能夠提供一個新的小提琴請,那將是非常讚賞,因爲我還是新的編碼。

謝謝!

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

+0

是'sameheight'定義? 'html'沒有'select'元素? – guest271314

+0

@ guest271314 sameheight屬性用於不同的元素。但是,用於從選項下拉列表中更改字體大小。 – Dave

+0

'sameheight'似乎是一個'function'?在'rearrange'函數中調用哪個? – guest271314

回答

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` 

See Fiddle

1

您可以使用input type="number"元素,button元素;設置chunkSizeinput type="number"valueAsNumber財產在button

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/