Question

我正在学习javascript和jQuery，所以我还不知道很多功能，寻找你的建议。

在高级别我想创建一个小脚本，允许我用文本做几件事，这里我看到伪代码：

提供的文字区域中的用户类型文字。
用户突出显示要更改的单词或在输入字段中输入要更改的单词（在这种情况下，我有一个问题，如果我需要很多输入字段，或者我只能使用一个创建字符串？）
通过按下按钮，文本中的单词将被隐藏并替换为让我们说这个标志 - （...）。
用户点击（...）并取消隐藏字词。

我非常感谢您提供的任何帮助。

目前我有一个文本区域+在下拉菜单选择后自动生成的所需数量的输入字段（不超过10个）。

我找到了这个例子http://james.padolsey.com/javascript/find-and-replace-text-with-javascript/，但我不知道如何更改字符串，所以也许你知道另一种方式？或者也许有方法可以轻松完成

<div class="row-form">
    <label class="label" for="message"></label>
    <textarea class="textarea" id="message" name="message" rows="5" cols="30">apple, banana, orange, apple, banana, orange</textarea>
</div> 

<div id="selected_form_code">
    <label class="label" for="subject"></label> 
    <select id="select_btn">
        <option value="0">--Select No Of Forms to Display--</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>

    </select>
</div>
<div id="form1">
    <form action="#" id="form_submit" method="post" name="form_submit">

    </form>
</div>

我的Javascript

// http://www.formget.com/create-multiple-form-fields-based-on-selection-jquery/
$(document).ready(function () {
    $('select#select_btn').change(function () {
        var sel_value = $('option:selected').val();
        if (sel_value == 0) {
            $("#form_submit").empty(); // Resetting Form
            $("#form1").css({
                'display': 'none'
            });
        } else {
            $("#form_submit").empty(); //Resetting Form
            // Below Function Creates Input Fields Dynamically
            create(sel_value);
            // Appending Submit Button To Form
            $("#form_submit").append($("<input/>", {
                type: 'submit',
                value: 'Accept'
            }))
        }
    });
    function create(sel_value) {
        for (var i = 1; i <= sel_value; i++) {
            $("div#form1").slideDown('slow');
            $("div#form1").append($("#form_submit").append($("<div/>", {
                id: 'head'
            }).append(), $("<input/>", {
                type: 'text',
                placeholder: 'Keyword' + i,
                name: 'keyword' + i
            }), $("<br/>")))
        }
    }
});

Answer 1

使用<div contenteditable="true">的此解决方案在边缘仍然略显粗糙，但是，如果我正确理解了问题，则包含所有必需的功能：

/* Grab <div contenteditable="true"> */
var editBox = document.querySelector('div[contenteditable]');

/* Toggle class which alternates between each <span> and its ::before pseudo-element */
function showHideEllipsis() {
    this.classList.toggle('show-before');
}

/* Attach function which toggles .show-before */
function attachShowHideEllipsis() {
    var spans = document.querySelector('div[contenteditable]').children;
    
    for (var i = 0; i < spans.length; i++) {
        spans[i].addEventListener('click',showHideEllipsis,false);
    }
}

/* Focus caret after the last character in the last span in <div contenteditable="true"> */
function focusEditBox() {
    var editBox = document.querySelector('div[contenteditable]');
    var spans = editBox.children;
    editBox.focus();
    var range = document.createRange();
    var selection = window.getSelection();
    range.setStart(spans[(spans.length-1)],0);
    range.collapse(true);
    selection.removeAllRanges();
    selection.addRange(range);
}


/* Add new <span> to <div contenteditable="true"> */
function addNewSpan() {
    var editBox = document.querySelector('div[contenteditable]');
    var newSpan = document.createElement('span');
    var newTextNode = document.createTextNode('');
    newSpan.appendChild(newTextNode);
    editBox.appendChild(newSpan);
}

/* Tidies up all the <span>s */
function updateSpans() {
    var editBox = document.querySelector('div[contenteditable]');
    var spans = editBox.children;

    for (var i = 0; i < spans.length; i++) {

        var spanText = spans[i].textContent;

        if (i < (spans.length - 1)) {

            if (spanText.charAt(0) === ' ') {
                spans[i].innerHTML = spanText.substr(1);
            }

            if (spanText === '') {
                spans[i].parentNode.removeChild(spans[i]);
            }
        }
    }

    attachShowHideEllipsis();
}


/* Responds to content being typed into <div contenteditable="true"> */
editBox.onkeydown = function checkKey(event) {
    var key = event.which || event.keyCode;

    if (key === 32) {
        addNewSpan();
        focusEditBox();	
    }

    else {
        updateSpans();
    }
}

/* Resets box when all content is deleted */
function restartEditBox() {
    if (editBox.textContent === '') {
        addNewSpan();
        focusEditBox();
    }
}

/* All event listeners */
window.addEventListener('load',addNewSpan,false);
window.addEventListener('load',focusEditBox,false);
window.addEventListener('load',attachShowHideEllipsis,false);
editBox.addEventListener('keypress',restartEditBox,false);

div[contenteditable] {
border:3px solid rgb(63,63,63);
width:400px;
height:150px;
padding: 6px;
border-radius:12px;
}

div[contenteditable]:focus {
outline: none;
}

div[contenteditable] span {
position:relative;
display:inline-block;
padding:0 4px;
height: 24px;
line-height: 24px;
overflow:hidden;
cursor:pointer;
}

div[contenteditable] span.show-before:hover {
color:rgb(191,223,255);
}

div[contenteditable] span.show-before {
color:rgb(255,255,255);
}

div[contenteditable] span.show-before::before,
div[contenteditable] span:hover::before {
color:rgb(0,0,0);
}

div[contenteditable] span:hover,
div[contenteditable] span.show-before:hover {
background-color:rgb(191,223,255);
}

div[contenteditable] span.show-before {
width:13px;
}

div[contenteditable] span:hover {
border-radius:4px;
}

div[contenteditable] span.show-before::before {
content:'...';
}

<div contenteditable="true"><span>apple,</span><span>banana,</span><span>orange,</span><span>apple,</span><span>banana,</span><span>orange</span></div>

使用关键字unhide onclick在textarea中查找，隐藏和替换文本

1 个答案: