Internet Explorer Developer Center >
> 
> 
How to change the default behavior of the 'x' button of the input element in IE 10.

Answered How to change the default behavior of the 'x' button of the input element in IE 10.

  • Thursday, March 08, 2012 8:17 AM
     
     
    Sign In to Vote
    0

    In IE 10, I found that there is an 'x' button on the input=text element, when clicked it, it deletes the text of the input element.

    I want to know how to change the the default behavior of this 'x' button. 

    Because this direct deleting destroes some logic of our product, I hope that I can process the click event of the 'x' button.


    • Edited by DaryLuo Monday, March 12, 2012 8:02 AM
    •  
     

All Replies

  • Monday, March 12, 2012 8:05 AM
    Moderator
     
     
    Sign In to Vote
    0
    Hi, please try the method on the following link:
    http://social.msdn.microsoft.com/Forums/pl/iewebdevelopment/thread/7abe117b-9aa4-4185-9d74-1b2f3be65c03
     
  • Monday, March 12, 2012 8:52 AM
     
     
    Sign In to Vote
    0

    I tried the link, and found that use the ::-ms-clear style, it hides all the 'x' button of the input element on the web page, but I only want to hide some of the input=text element, not all. It is better that I handle the 'x' button click, not hiding it. Is there any way to do it?


    • Edited by DaryLuo Monday, March 12, 2012 8:54 AM
    •  
     
  • Monday, March 12, 2012 9:53 PM
     
     Proposed Answer
    Sign In to Vote
    0

    input.nobutton{-ms-clear:hide}

    <input type="text" class="nobutton"/>

    Rob^_^

     
  • Tuesday, March 13, 2012 1:34 AM
     
     
    Sign In to Vote
    0

    I'm very sorry, but I tried the -ms-clear: hide  style, and it doesn't work on IE 10, the 'x' button still show on IE10 when input element got focus.

    By the way, it is best that I can handle the 'x' button click event and prevent the default behavior, not hiding it, is there any way to do it?

    My sample code as follows.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <style type="text/css">
            input.nobutton {
                -ms-clear: hide;
                background-color: #b6ff00;
            }
        </style>
    </head>
    <body>
        <input id="text" value="abc" type="text" class="nobutton" />
    </body>
    </html>

     
  • Wednesday, March 14, 2012 1:50 AM
     
     Answered
    Sign In to Vote
    0
    Hi, since Internet Explorer 10 is only a Consumer Preview version currently, there may be some compatible issue, I think this issue will go with the release version.
    • Edited by FightAsABull Wednesday, March 14, 2012 1:50 AM
    • Marked As Answer by DaryLuo Wednesday, March 14, 2012 2:36 AM
    •  
     
  • Wednesday, March 14, 2012 2:36 AM
     
     
    Sign In to Vote
    0
    Thanks, I will wait for the final version of the IE10.
     
  • Wednesday, March 14, 2012 8:33 AM
     
     Proposed Answer Has Code
    Sign In to Vote
    0

    Sorry Dary, I was almost correct with the css syntax.

    see this answer - http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/7abe117b-9aa4-4185-9d74-1b2f3be65c03

    <!DOCTYPE html>
 <html>
 <head>
     <title>Untitled Page</title>
  
     <style type="text/css">
    
     .nobutton::-ms-clear {
         display: none;
     }
    
     </style>
  
 </head>
 <body>
  
 <input type="text" value="foo" class="nobutton"/>
 </body>
 </html>

    Rob^_^

    • Proposed As Answer by doctoroftypeMVP Wednesday, March 14, 2012 8:33 AM
    •  
     
  • Monday, July 09, 2012 5:59 AM
     
     
    Sign In to Vote
    0
    Hello...Rob.. ,The above code you have given is absolutely working fine for HTML page...I tried the same for asp & aspx page.Its not working..Do I need to make some changes in the given by you??