Question

我需要代码

我单击时需要一个按钮，该按钮将保持按下状态。

有时候我会感到很尴尬，因为我似乎被这些最琐碎的事情绊倒了，我真的很感谢这个社区的帮助，任何推动我前进的答案都会受到赞赏！

谢谢！：）

Answer 1

我的挂衣（需要使用指令）

-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

我会尝试通过设置按钮样式来实现这一目标。

例如：

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

此边框类型应使您的按钮看起来像被不断按下一样。

Answer 3

也许您可以像这样使用css :focus-Selector：

在您的HTML中：

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

在您的CSS中：

.btn:focus { background: #ff0000; }

Answer 4

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

单击后如何使按钮保持“按下状态”

4 个答案: