小编Dav*_*ave的帖子

下面的小提琴允许将文本粘贴到a中<textarea>并生成相同的段落,动态地<p>由相同数量的字符组成.

发生的问题是; 来自先前动态生成的段落的文本<p>在每个标记内溢出,并且不会正确地继续到下一个动态段落.因此,用户是否可以按Enter键并将该内容向下移动到下一个现有段落中,同时仍然动态且自动地保留现有格式？

如果可以提供一个新的小提琴,我将非常感激,因为我还是新编码.再一次,小提琴可以在这里找到.

更新:是否可以生成段落,用户可以按Enter键,如果可能,将其内容无缝地移动到下面的段落中？并且当按下退格按钮时应用同样的内容,以使内容向上移动到上一段？出现的问题是,当按下回车时,文本似乎由于css中的溢出属性而隐藏文本.

$(function() {
    $("#Go").on('click', function() {
        var theText = $('textarea').val();
        var numberOfCharacters = 300;
        while (theText.length) {
            while (theText.length > numberOfCharacters &&
                theText.charAt(numberOfCharacters) !== ' ') {
                numberOfCharacters++;
            }
            $("#text_land").append("<br><\/br><p>" + theText.substring(
                    0, numberOfCharacters) +
                "<\/p><br><\/br>");
            theText = theText.substring(numberOfCharacters);
            numberOfCharacters = 300;
            $('p').attr('contenteditable', 'true');
            $("p").addClass("text");
        }
    })
})
$('select').on('change', function() {
    var targets = $('#text_land p'),
        property = this.dataset.property;
    targets.css(property, this.value);
}).prop('selectedIndex', 0); …

更新:示例:<p contenteditable="true">Text Text </p>
在示例中,是否可以选择<p>元素中的第二个"文本"单词,然后单击按钮以仅动态地向所选"单词"添加项目符号？

是否有可能在a <p contenteditable="true">Text</p>中突出显示<p>元素中的选定文本,并在按钮单击动态上为所选文本添加项目符号？

如果可以提供更新的小提琴,我将非常感激,因为我还不熟悉编码.

小提琴

HTML:

<button>
Apply Bullet Point to Selected Text
</button>

<p contenteditable="true">
Text
Text
</p>

<br>

<p contenteditable="true">
Text
Text
</p>

以下JSFiddle将文本拆分为<p>具有设置文本限制的单个段落框.

更新2:生成的框都需要:

"等于相同的高度和宽度",

并在动态更新字体时更改,需要在所有元素中保持一致.

更新3:最后生成的段落不等于边框大小高度的其他段落.

更新4:所有段落都需要与height属性auto一样生成.当前答案的问题在于,最后生成的段落边界也需要与前一个高度边界相同的高度与其他段落相同,包括更改字体大小时.

更新5 [图像]:上一个分段高度和边框不等于其他的问题示例.

链接到小提琴

如果可以提供一个新的小提琴,我将非常感激,因为我还是新编码.谢谢!

$(function() {
  $('select').on('change', function() {
    var targets = $('p'),
      property = this.dataset.property;
    targets.css(property, this.value);
  }).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'); …

附加小提琴中的代码删除了a中的所有URL <textarea>.

代码是否可以删除所有URL,除非URL在括号内 -  例如(google.com) - 在<textarea>动态内？

如果可能的话,我会欣赏一个更新的小提琴,因为我不熟悉编码.

$(function() {
  $("#txtarea").keyup(function() {
    console.log(this.value);
    this.value = this.value.replace(/(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?/mg, ' ');
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<textarea id="txtarea" placeholder="How to stop http being entered into textarea?"></textarea>

小提琴

是否可以使用JSPDF将<p>包含边框的段落保存为PDF,包含格式并将元素保留在页面的中心？

以下代码允许在粘贴到文本中时生成段落textarea.正如在这个小提琴中所展示的那样,似乎可以将表格保存为PDF.

但是,是否可以动态地将以下动态段落和边框保存为PDF？

如果可以提供更新的小提琴,我将非常感激,因为我还不熟悉编码.

的jsfiddle

谢谢!

HTML:

 <div align="center"> 
     <h4 align="center">
         <u>Paste text in the field below to divide text into paragraphs.</u>
    </h4> 
    <textarea placeholder="Type text here, then press the button below." cols="50" id="textarea1" rows="10">
    </textarea>
    <br><br>
    <button id="Go">Divide Text into Paragraphs!</button> 
</div>
<hr> <h2 align="center">Dynamic Paragraphs will appear below: <br>[Paragraphs below for saving as PDF]</h2> <div> <div align="center" id="text_land" style="font-family: monospace"> </div></div>

JQuery的:

   $(function(){$("#Go").on("click",function(){for(var t=$("textarea").val(),e=300;t.length;){for(;t.length>e&&" "!==t.charAt(e);)e++;$("#text_land").append("<br></br><p>"+t.substring(0,e)+"</p><br></br>"),t=t.substring(e),e=300,$("p").attr("contenteditable","true"),$("p").addClass("text")}})}),$("select").on("change",function(){var t=$("#text_land p"),e=this.dataset.property;t.css(e,this.value)}).prop("selectedIndex",0),end;

CSS:

@media print{p{page-break-inside:avoid}}p{position:relative}@media print{.no-print,.no-print *{display:none …

是否可以使用JQuery <p>从<select>下拉列表中动态选择所需语言来更改段落标记内的内容 语言 ？此外,该段落包含contenteditable="true"允许编辑所需的语言.

的jsfiddle

因此,我创造了一个小提琴,以便更好地理解我想要解决的问题.如果可以提供更新的小提琴,我将非常感激,因为我还是新编码.

谢谢!

HTML:

 <select>
    <option disabled selected>
        Change Language of Text
    </option>
    <option>
        English [Default]
    </option>
    <option>
        Chinese
    </option>
    <option>
        Japanese
    </option>
    <option>
        French
    </option>
    <option>
        Spanish
    </option>
</select>
<hr>
<h4><b>Change below text to language from dropdown list
dynamically:</b></h4>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rhoncus
nulla velit, eget mattis ligula lobortis consectetur. Aenean dictum libero
vel augue faucibus, nec sodales enim ultricies. Cras sollicitudin volutpat …

小提琴

以下小提琴允许将<select>下拉元素作为<li>引导下拉列表中的一个元素包含在内.

小提琴中的当前问题是当<select>单击下拉元素时,它将立即消失,以及引导下拉列表,并且不允许用户从下拉列表中选择一个选项.[在Mac OS X上的Chrome中发生]

因此,是否可以在附加的小提琴中允许<select>元素正常工作,允许用户从引导程序中的下拉列表中进行选择？

如果可以提供更新的小提琴,我将非常感激,因为我还是新编码.

谢谢!

HTML

<div class="dropdown btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Action
    <span class="caret"></span>
</a>
<ul class="dropdown-menu">
    <li><select data-toggle="dropdown" class="form-control" data-property="color">
            <option disabled>Select color:</option>
            <option>red</option>
            <option>green</option>
            <option>blue</option>
            <option>white</option>
            <option>black</option>
        </select></li>
</ul>