Question

当用户使用javascript vanilla点击输入文本字段时，我想在文本输入下方显示带有链接（锚标记）的消息。

<div class='container'>
    <label for='email' >Email Id*:</label><br/>

    <input type='text' name='email' id='email' maxlength="50" /><br/>
    <span id='contactus_email_errorloc' class='error' style="font-size: 14px;color:#D32626;background-color: #fff;
font-weight: 800;"></span>

</div>

有人可以解释一下如何做到这一点吗？

Answer 1

试一试。

<div class='container'>
    <label for='email' >Email Id*:</label><br/>

    <input type='text' name='email' id='email' maxlength="50" onclick="displayLink()" /><br/>
    <a id="e" href='#'></a>
    <span id='contactus_email_errorloc' class='error' style="font-size: 14px;color:#D32626;background-color: #fff;
font-weight: 800;"></span>

</div>
<script>
function displayLink(){
 document.getElementById('e').innerHTML = 'Some Random Text';
}
</script>

Answer 2

我认为会这样做

    <div class='container'>
        <label for='email' >Email Id*:</label><br/>

        <input type='text' name='email' id='email' maxlength="50" /><br/>
        <span id='contactus_email_errorloc' class='error' style="font-size:14px;color:#D32626;background-color: #fff; font-weight: 800;"></span>

        <div id="my-link"></div>
    </div>

    var x = document.getElementById("email");
    x.addEventListener("focus", myFocusFunction, true);

    function myFocusFunction() {
        var str = "New Link";
        var result = str.link("https://www.google.com");
        document.getElementById("my-link").innerHTML = result;
    }

var x = document.getElementById("email");
x.addEventListener("focus", myFocusFunction, true);

function myFocusFunction() {
    var str = "New Link";
    var result = str.link("https://");
    document.getElementById("my-link").innerHTML = result;
}

<div class='container'>
    <label for='email' >Email Id*:</label><br/>

    <input type='text' name='email' id='email' maxlength="50" /><br/>
    <span id='contactus_email_errorloc' class='error' style="font-size: 14px;color:#D32626;background-color: #fff; font-weight: 800;"></span>

    <div id="my-link"></div>
</div>

Answer 3

如果点击anchor，此示例会显示href <input>。 [仅使用Javascript]

＆＃13;

<script>
function myFunction() {
    document.getElementById("anchorElem").style.display = "inline";
}
</script>


Email Id:
<input type="text" onclick="myFunction()" value="neetu.yadav@gmail.com"></input> <br><br>

<div id="anchorElem" style="display:none;">Click to goto: <a href="https://www.stackoverflow.com"> StackOverflow</a></div>

＆＃13;

单击输入文本字段显示锚标记

3 个答案: