Question

在我的HTML中：

<div class="main">
<label>Select an option </label>
<select>
    <option value="user123">  user123 </option>
    <option value="user234"> user234 </option>
    <option value="user345"> user345 </option>
    <option value="user456"> user456 </option>
    <option value="Other"> Other </option>
</select>
    <input type="text" style="visibility:hidden" maxlength="7" id="custom" </input>
</div>

在我的打字稿中：

if(input=="Other") { 
      (<HTMLInputElement>document.getElementByID('custom').removeAttribute('style')
}

通过执行此操作，当用户从下拉列表中选择“其他”时，它将激活文本框。但是，如果用户将他/她的想法改为常规选项（不激活文本框），则文本框仍将保留。我理解这个问题的原因是因为我删除了隐藏属性。因此，只有当用户选择“其他”并隐藏其他案例的文本框时，才能显示文本框。

另一个问题是如何强制用户只在文本框中输入“userXXX”？

谢谢！

Answer 1

我只想使用布尔值来显示和隐藏元素。因此，检查是否选中了checkbos，并将其设置为visible，否则将其设置为false

var element = <HTMLInputElement> document.getElementById("otherchk");
var isChecked = element.checked;

isChecked ? this.isVisible : !this.isVisible

然后使用html

中的隐藏选择器

<div class="main">
<label>Select an option </label>
<select>
    <option value="user123">  user123 </option>
    <option value="user234"> user234 </option>
    <option value="user345"> user345 </option>
    <option value="user456"> user456 </option>
    <option value="Other" id="otherchk"> Other </option>
</select>
    <input type="text" [hidden]="isVisible == false" maxlength="7" id="custom" </input>
</div>

在用户选择OTHER选项后激活时间文本输入

1 个答案: