valor - validar botones en javascript

¿Alguna forma de mantener presionado un botón html?

Question

Tengo un botón <input type="button" name="name" value="value"/> . ¿Hay alguna manera de mantenerlo presionado visualmente y descomprimirlo a través de javascript?

Gracias

Answer 1

Inspirado en la respuesta de Brad Christie, un ejemplo ligeramente modificado basado en un elemento HTML de anclaje, que mejora el aspecto visual al establecer un fondo y esquinas redondeadas diferentes:

<a class="bouton" style="border-width:1px;border-radius:3px;" onclick="javascript:this.style.borderStyle = (this.style.borderStyle!==/'inset/' ? /'inset/' : /'outset/');this.style.background = (this.style.borderStyle!==/'inset/' ? /'/' : /'#ccc/')" value="Details" >&hellip;</a>

La descripción CSS del botón:

a.bouton {
display:inline-block;
width:40px;
height:18px;
background-image:url(''bouton_gris_petit.png'');
background-repeat:no-repeat;
border: 1px solid #888;
font-size:11.3px;
color:#666;
cursor:pointer;
text-shadow:#666 0px 0px 0px;
text-align:center;
border-radius:3px;
} 

Para descargar la imagen del botón: https://i.stack.imgur.com/h1xVV.png

Answer 2

No hay manera de hacer eso con javascript.

Pero puede usar javascript para simular ese efecto agregando / eliminando una clase css, o editando directamente las propiedades css que ha elegido usar.

Answer 3

No, eso no es posible.

Te sugiero que uses algo como los botones de jQuery UI . Soportan exactamente este comportamiento: http://jqueryui.com/demos/button/#checkbox

Answer 4

Probaría CSS y usaría la inset estilo de borde, personalmente.

<input type="button" value="Inset Border" style="border-style:inset;" />

Para obtener una lista de diferentes estilos, consulte este jsFiddle .

Answer 5

Puede usar este document.getElementById ("some_id"). Style.border.

<input id="some_id" onTap="change_me()" type="button" name="name" value="value"/>

var button_switch = "on";
function change_me(){
    if(button_switch==="on"){
        document.getElementById("some_id").style.border = "3px inset rgb(254, 255, 208)";
        button_switch = "off";
    }else{
        document.getElementById("some_id").style.border = "3px outset rgb(254, 255, 208)";
        button_switch = "on";
    } 
}

Answer 6

alternar el estado visual del botón por:

btn.onclick=function(e) {
    this.style.borderStyle = (this.style.borderStyle!==''inset'' ? ''inset'' : ''outset''); 
}

cuando necesite ver si está deprimido, simplemente verifique si btn.style.borderStyle===''inset''

Answer 7

function pp() {
    if(document.getElementById(''pBut'').innerHTML == ''Pause''){
        // do some stuff
        document.getElementById(''pBut'').innerHTML = ''Continue'';
        document.getElementById(''pBut'').style.borderStyle = ''inset'';
    }
    else {
        // do some other stuff
        document.getElementById(''pBut'').innerHTML = ''Pause'';
        document.getElementById(''pBut'').style.borderStyle = ''outset'';
    }
}

<button id="pBut" type="button" onclick="pp()" title="Pause or continue the chapter.">Pause</button>

Funciona para mi. Probado con FireFox y Opera, pero debe ser compatible con todos los navegadores.