有了两个文本框，如何在键入一个文本框后禁用文本框

Question

我有两个文本框。一个代表姓名，一个代表号码。我想要的是一次只能有一个输入。例如，如果用户选择了名称并开始键入，那么数字文本框将被禁用。我试图在不使用按钮的情况下实现这一点，只要名称文本框有文本，则禁用数字文本框，反之亦然。这是我下面的东西，它不起作用。有没有更简单的方法？或者一种只在HTML中显示的方式。我被困了，非常感谢你的帮助。

function changetextbox() {
if (document.getElementById("name").value !== "null") {
document.getElementById("number").disable = 'true';
} else {
document.getElementById("number").disable = 'false';
}
if (document.getElementById("number").value !== "null") {
document.getElementById("name").disable = 'true';
} else {
document.getElementById("name").disable = 'false';
}
}

<input type="text" name="enterName" id="name" placeholder="Enter Name" />
<input type="text" name="enterNumber" id="number" placeholder="Enter Number" />

Answer 1

看看有角度的形式-https://angular.io/guide/forms

但简而言之，您可以执行以下操作-将字符串值强制为布尔值，并在其他输入存在值的情况下禁用formControl。

<form>
<input type="text" [(ngModel)]="name" name="name" [disabled]="!!number">
<input type="text" [(ngModel)]="number" name="number" [disabled]="!!name">
</form>

您的TS文件

export class ClassName implements OnInit {
name: string;
number: string;
}

Answer 2

let name = document.getElementById("name");
let number = document.getElementById("number");
function inputfunction() {
if (name.value.length > 0) {
number.disabled = true;
} else if (number.value.length > 0) {
name.disabled = true;
} else {
name.disabled = false;
number.disabled = false;
}
}

name.addEventListener('input', inputfunction);
number.addEventListener('input', inputfunction);

<input type="text" name="enterName" id="name" placeholder="Enter Name" />
<input type="text" name="enterNumber" id="number" placeholder="Enter Number" />

Answer 3

您可以使用角度聚焦和聚焦指令。

HTML文件

<input type="text" name="enterName" id="name" placeholder="Enter Name" [disabled]="!isNameFocused" (focus)="onFocus()" (focusout)="onFocusOut()"/>
<input type="text" name="enterNumber" id="number" placeholder="Enter Number" [disabled]="!isNumberFocused" (focus)="onFocusOut()" (focusout)="onFocus()" />

TS文件

isNameFocused: boolean = true;
isNumberFocused: boolean = false;
onFocus() {
this.isNameFocused = true;
this.isNumberFocused = false;
}
onFocusOut() {
this.isNumberFocused = true;
this.isNameFocused = false;
}

Answer 4

看看这个

window.addEventListener("load", function() { // on page load
const nmb = document.getElementById("number"),
name = document.getElementById("name")
document.getElementById("myForm").addEventListener("input", function(e) {
const tgt = e.target;
const otherField = tgt.id === "name" ? nmb : name;
otherField.disabled = tgt.value !== ""
});
});

<form id="myForm">
<input type="text" name="enterName" id="name" placeholder="Enter Name" />
<input type="text" name="enterNumber" id="number" placeholder="Enter Number" />
</form>