How can I reset the input field and trigger the delete key press on click UL anchor tag?-CodePudding

I have an input box. Where I run commands to filter contents. When a user inputs in the box then the table of contents anchor is not working. So, I want to reset input and trigger the delete keypress one time on click UL anchor tag, when a user clicks on the UL anchor.

$(document).on("click", "ul a", function () {
        $("#myInput").val("");
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<div class="inarea">
<input id="myInput" type="text" value="12345678">
</div>
            
            
            
<ul>
<li><a href="#abc">ABC</a></li>
<li><a href="#def">DEF</a></li>
<li><a href="#xyz">XYZ</a></li>
</ul>

CodePudding user response：

Is this what you are looking for?

So what I did is I simply set the value of the input to "" which means none.

Please tell me if this is helpful so that I can change my answer, Thank You.

 const buttons = document.querySelectorAll("a");

 for (const button of buttons) {
    button.addEventListener('click', function(event) {
    document.getElementById('myInput').value = "";
  })
 }

.button {
       color: #fff;
    padding: 11px;
    margin: 15px;
    display: block;
    text-transform: uppercase;
    background: #0d496f;
    font-size: 13px;
    border-radius: 0;
    float: left;
    font-weight: 700;
    cursor: pointer;
    width: 15%;
    text-align: center
    }

<div class="inarea">
<form id="form">
<input id="myInput" type="text" value="12345678">
</form>w
</div>
<ul>
<li><a href="#abc">ABC</a></li>
<li><a href="#def">DEF</a></li>
<li><a href="#xyz">XYZ</a></li>
</ul>
</div>

CodePudding user response：

you can use the document.execCommand("delete"); function to emit the delete key press.

$(document).on("click", "ul a", function () {

        $("#myInput").val("");
        document.execCommand("delete");

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<div class="inarea">
<input id="myInput" type="text" value="12345678">
</div>
            
            
            
<ul>
<li><a href="#abc">ABC</a></li>
<li><a href="#def">DEF</a></li>
<li><a href="#xyz">XYZ</a></li>
</ul>

but this would make no use. you can use the selectionStart and selectionEnd properties of the input element to select a part or whole of the input text, and then use the document.execCommand("delete"); to delete the text