[英]How to make a word a link if the user has input # before it?
I am using this code: 我正在使用此代码:
<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>
I want i such a way that if the user inputs a word and he has place #
before the word without space then how to make the word as a link. 我希望我这样一种方式:如果用户输入了一个单词,并且他在单词前没有空格的地方有
#
,那么该如何将该单词作为链接。 Means the tag which happens in facebook. 表示在Facebook中发生的标签。 Can it be done with java script and how.
可以用Java脚本以及如何完成。
This was just the example to demonstrate i want to intergrate this type in my project as comments. 这只是说明我想将这种类型集成到我的项目中作为注释的示例。 And it will be with php.
这将与PHP。 Thanks
谢谢
You could use a textarea to input and a render to show the output.
您可以使用textarea输入,使用渲染显示输出。 Then hiding the input and showing the output only.
然后隐藏输入并仅显示输出。 But that's another story.
但这是另一个故事。
If you use a contentEditable div, you can actually insert and render the html from it in the same component. 如果使用contentEditable div,则实际上可以在同一组件中插入并呈现html。 Check it out!
看看这个!
$(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]);
});
Thanks for the attention. 感谢您的关注。
<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 结帐Jsfiddle演示
https://jsfiddle.net/tum32675/1/ https://jsfiddle.net/tum32675/1/
Here's one example to check. 这是一个要检查的例子。 It works with enter keypress and even prevents for adding same tags over again: http://codepen.io/zvona/pen/KpaaMN
它可以与Enter键配合使用,甚至可以防止再次添加相同的标签: http : //codepen.io/zvona/pen/KpaaMN
<input class='input' type="text" />
<output class='output'></output>
and: 和:
'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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.