Question

我正在使用此代码：

<form oninput="x.value=a.value">Account Info <br>
<input type="text" id="a">First Name<br>
UserName <output name="x" for="a"></output>
</form>

我想要这样一种方式：如果用户输入一个单词并且他在没有空格的单词之前放置了#，那么如何将单词作为链接。表示在facebook中发生的标记。是否可以使用java脚本以及如何完成。

这只是证明我想在我的项目中将此类型整合为评论的示例。它将与PHP。感谢

Answer 1

您可以使用textarea输入和渲染来显示输出。然后隐藏输入并仅显示输出。但那是另一个故事。

如果使用contentEditable div，您实际上可以在同一个组件中插入并呈现html。看看吧！

$(document).on("keyup","#render", function(){
    var words = $(this).text().split(" ");
    console.log(words);
    if (words){
        var newText = words.map(function(word){
            if (word.indexOf("#") == 0) {
                 //Starts with #
                 //Make a link
                 return $("<div/>").append($("<a/>").attr("href", "#").text(word)).html();
            }
            return word;
        });
    }
    $(this).empty().append(newText.join(" "));
    placeCaretAtEnd( $(this)[0]);
});

以下是Plunker

感谢您的关注。

Answer 2

<form>Account Info <br>
<input type="text" id="a">First Name<br/>
<output id="result" name="x" for="a"></output>
<button type="button" onclick="changeVal(document.getElementById('a').value)">Click</button>
</form>
<script>
function changeVal(value1){
    var dt = value1.split(" ");
    document.getElementById("result").innerHTML = "";
    for(var t=0; t < dt.length; t++){
        if(dt[t].startsWith("#")){
            document.getElementById("result").innerHTML = document.getElementById("result").innerHTML+" <a href='#'>"+dt[t]+"</a>";
        }
        else{
            document.getElementById("result").innerHTML = document.getElementById("result").innerHTML+" "+dt[t];
        }
    }
}
</script>

Checkout Jsfiddle demo

https://jsfiddle.net/tum32675/1/

Answer 3

这是一个要检查的例子。它适用于输入按键，甚至可以防止再次添加相同的标签：http://codepen.io/zvona/pen/KpaaMN

<input class='input' type="text" />
<output class='output'></output>

和：

'use strict';
var input = document.querySelector('.input');
var output = document.querySelector('.output');

input.addEventListener('keyup', function(evt) {
  if (evt.keyCode !== 13 || !input.value.length || ~output.textContent.indexOf(input.value)) {
    return;
  }

  var tag = document.createElement('a');
  tag.appendChild(document.createTextNode(input.value));

  if (input.value.startsWith("#")) {
    tag.setAttribute("href", input.value);
  }

  output.appendChild(tag);

  input.value = "";
}, false);

如果用户之前输入了＃，如何将单词设为链接？

3 个答案: