Любой способ удерживать кнопку html нажатой?

У меня есть кнопка <input type="button" name="name" value="value"/>. Есть ли способ сохранить визуальное нажатие и удалить его с помощью javascript?

Спасибо

Ответ 1

Я бы попробовал CSS и лично использовал стиль inset в рамке.

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

Список различных стилей см. этот jsFiddle.

Ответ 2

Нет, это невозможно.

Я предлагаю вам использовать что-то вроде jQuery UI Buttons. Они поддерживают именно такое поведение: http://jqueryui.com/demos/button/#checkbox

Ответ 3

Нет никакого способа сделать это с помощью javascript.

Но вы можете использовать javascript для имитации этого эффекта, добавляя/удаляя класс css или напрямую редактируя свойства css, которые вы выбрали для использования.

Ответ 4

переключить визуальное состояние кнопки:

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

когда вам нужно увидеть, если он нажал, просто проверьте, <btn.style.borderStyle==='inset'

Ответ 5

Вы можете использовать этот 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";
    } 
}

Ответ 6

Вдохновленный от Брэда Кристи ответ, слегка измененный пример на основе элемента привязки HTML, который улучшает визуальный аспект, устанавливая другой фон и закругленные углы:

<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>

Описание кнопки CSS:

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;
}

Чтобы загрузить изображение кнопки: https://i.stack.imgur.com/h1xVV.png

Ответ 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>