如何禁用超过按钮时显示的默认URl

Question

Please refer below image

when ever am handovering it shows some URl in window Bottom of IE browser. but no url supplied for this button.

This is the button code

<button id="btnCancel"  >Cancel</button>

How can i remove the invalid URL ? why it showing in IE browser ?

Thanks,

Siva

Answer 1

It's not something you can ask to client Browser so there is not an official method. Fortunately there are few workarounds.

Let's first see how it's usually done with links:

<a id="myLink" href="#" data-href="http://stackoverflow.com">Click me</a>

<script type="text/javascript">
    $(document).ready(function () {
        $("#myLink").click(function (e) {
            e.preventDefault();

            window.location.href = $("#btnCancel").data("href");
            return false;
         });
    });
</script>

Internet Explorer shows same link for submit buttons too when they're in a <form> (and of course target URL is combination of - resolved - target and action attributes). Moreover don't forget that default for type attribute in <button> is submit .

Solutions

First possible solution is to do not use <button> but <input type="button"> to do the trick: IE won't display target URL and you can manually submit your form with JavaScript.

If you need advanced formatting provided by <button> then you can apply same technique: use buttons of type button instead of submit (the default) and IE won't display any tooltip.

HTML (if you need to keep <button> element):

<button id="btnCancel" type="button">Cancel</button>

Or (if content is just a plain string):

<input id="btnCancel" type="button" value="Cancel"></input>

Or (if you're using Bootstrap and you want to use a link):

<a id="btnCancel" class="btn" href="#">Cancel</a>

JavaScript:

<script type="text/javascript">
    $(document).ready(function () {
        $("#btnCancel").click(function (e) {
            myForm.submit(); 
        });
    });
</script>

Answer 2

Always specify the type attribute for a "button" element. Different browsers use different default types for the "button" element. If you do not specify the "type" in button element, browser assumes it a "submit" type and use enclosing "form" element action of the button element. Please refer below link for reference- https://www.w3schools.com/tags/tag_button.asp