激活時間文本輸入的用戶選擇其他選項

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檢查，並將其設置爲可見，否則將其設置爲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>