入力テキストフィールドのクリック時にアンカータグを表示

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

私は<input>がクリックされた場合には

<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 2

を行います。この例では、hrefとanchorを表示すると思います。

<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>

Answer 3

[のみJavaScriptを使用して]それを試してみます。

<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>