¿Hay alguna manera de mantener presionado un botón html?

Tengo un botón <input type="button" name="name" value="value"/>. ¿Hay alguna forma de mantenerlo presionado visualmente y presionarlo mediante javascript?¿Hay alguna manera de mantener presionado un botón html?

Gracias

Fuente

2011-06-04 gerarddp

¿Por qué querrías hacer eso? – Oded

@Oded: Me imagino que le gustaría usarlo como un botón de alternar. Supongo que sería posible con los botones de radio, pero eso sería mucho faff. – Bojangles

Me enfrenta a un problema similar. Tengo una biblioteca desde la que estoy construyendo una interfaz de usuario, sin embargo, los botones no son como los botones de alternar jQuery (que son los que necesito). No sé cómo voy a entrelazar las dos bibliotecas (la que estoy usando y la interfaz de usuario de jQuery). Alguna sugerencia por favor? – user65165

Me gustaría probar CSS y usar el estilo de borde inset, personalmente.

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

Para una lista de diferentes estilos, por favor ver this jsFiddle.

Fuente

2011-06-04 17:40:51

Yo también pensé en el truco de CSS, pero creo que está hablando del botón de encendido/apagado representado por el botón presionado/sin presionar. La sugerencia de @ ThiefMaster se adaptará mejor a la necesidad. – TheVillageIdiot

@TheVillageIdiot: ¿Aplicar una clase al hacer clic no es posible? Solo tiene que presionar _appear_, en realidad no tiene que ser así. ;-) –

Esto funciona perfectamente con JavaScript: "pressedButton.style.borderStyle =" inserto ". Aquí hay una lista de propiedades que puede establecer en JavaScript: https: //developer.mozilla.org/es-ES/docs/Web/CSS/CSS_Properties_Reference – kermit

No, eso no es posible.

Le sugiero que utilice algo como el jQuery UI Buttons. Soportan exactamente este comportamiento: http://jqueryui.com/demos/button/#checkbox

Fuente

2011-06-04 17:34:56 ThiefMaster

No hay forma de hacerlo 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.

Fuente

2011-06-04 17:35:38 Mohamed

Puede usar este documento.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"; 
    } 
}

Fuente

2016-06-09 02:23:27

alternar el estado visual del botón por:

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

cuando se necesita para ver si está deprimido, simplemente comprobar si btn.style.borderStyle==='inset'

Fuente

2016-08-16 05:40:50 kofifus

inspirado de la respuesta de Brad Christie, un ejemplo ligeramente modificada basan en un elemento HTML de anclaje, que mejora el aspecto visual al establecer un fondo diferente y esquinas redondeadas:

<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

Fuente

2017-04-17 16:01:30 OuzoPower

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 mí. Probado con FireFox y Opera, pero debe ser compatible con todos los navegadores.

Fuente

2017-06-02 00:45:00

Gracias @nonzaprej, por su edición. Tiene más sentido ahora. –

¿Hay alguna manera de mantener presionado un botón html?

Respuesta

Cuestiones relacionadas