HTML5文本框/ textarea可点击文本

Question

美好的一天，

我是否可以知道是否有可能/存在一个允许某些文字说明带＃可点击的UIkit？

例如：

text＃hello world in text area，由一些php get脚本填充。我希望#text＃可以点击，并且应该执行一些操作。

Answer 1

这是一种方法，通过它您可以使textarea的某些内容可以点击。 这里我们没有使用textarea。相反，我们使用带有contentEditable = true的div。然后我们改变div的样式，使它看起来像一个文本区域。 现在用javascript你可以用锚标签替换div里面的单词..

<style type="text/css">
    #editableDiv {
        -moz-appearance: textfield;
        -webkit-appearance: textfield;
        background-color: white;
        background-color: -moz-field;
        border: 1px solid darkgray;
        box-shadow: 1px 1px 1px 0 lightgray inset;
        font: -moz-field;
        font: -webkit-small-control;
        margin-top: 5px;
        padding: 2px 3px;
        width: 398px;
    }
</style>

<div id="editableDiv" contenteditable="true">This is a paragraph. It is editable. Try to change this #text. <a href="www.google.com">click here</a>

</div>
<button type="button" onclick="displayResult()">Click here to change the content</button>
<script>
    function displayResult() {
        var x = document.getElementById("editableDiv").innerHTML;
        var m = x.replace("#text", "<a href ='#'>replaced text</a>");
        document.getElementById("editableDiv").innerHTML = m;
    }
</script>

在上面的javascript代码而不是#text中，你也可以使用正则表达式