Как сделать так, чтобы кнопка оставалась «нажатой» после нажатия

Question

Мне нужен код, пожалуйста

Мне нужна кнопка, когда я нажимаю, кнопка останется нажатой.

Иногда я чувствую себя смущенным, потому что меня, кажется, сбивает с толку эти самые тривиальныеЯ очень ценю помощь этого сообщества, и любой ответ, который толкает меня вперед, всегда ценится!

Спасибо!:)

Answer 1

мой sulotion (нужно использовать директиву)

- HTML

button.component.html

<button  class="btn btn-danger" style="width: 110px" appButton"
         ></button>

- Машинопись

button.directive.ts

@Directive({
  selector: '[appButton]'
})
export class ButtonDirective implements OnInit {

  constructor(private elRef: ElementRef, private renderer: Renderer2) {

  }

  ngOnInit() {
  }

@HostListener('mousedown') onmousedown(eventData: Event) {
   if (this.elRef.nativeElement.style.backgroundColor === 'blue') {
     this.renderer.setStyle(this.elRef.nativeElement, 'background-color', 'rgba(200,0,0,0.7)');
   } else {
     this.renderer.setStyle(this.elRef.nativeElement, 'background-color', 'blue');

   }

}

Answer 2

Может быть, вы могли бы просто использовать css : Focus-Selector вроде:

В вашем HTML:

<button class="btn">myButton</button>

В вашем CSS:

.btn:focus { background: #ff0000; }

Answer 3

HTML

<button id="myBtn" onclick="changeText()" [disabled]="disabled" >{{buttonText}}</button>

Комп

buttonText = "Press Here"
disabled = false

changeText() { 
    const button = document.getElementById('myBtn');
    if (button.classList.contains('pressed') { 
        return;
    } else {
        this.buttonText = "Pressed";
        button.classList.add('pressed');
        this.disabled = true;
    }
}

CSS

.pressed {
    background: "something darker then your unclicked button background color"
}

Answer 4

Я бы попытался добиться этого, стилизовав вашу кнопку.

Например:

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

Этот тип границы должен сделать вашу кнопку похожей на постоянно нажатую.