Can't type in input field using Microsoft Edge

2019-08-10 20:31发布

问题:

I have an Angular app that uses some bootstrap, and have a text input box that looks like this

   <div class="form-group"> <!-- Name question on the form  -->
     <div class="row">
       <div class="col-12">
         <label>
           Under what name do you want to save this form?
         </label>
       </div>
     </div>
     <div class="input-group">
       <input class="form-control" type="text" [(ngModel)]="cons.name" 
         [ngModelOptions]="{standalone: true}"
         mdTooltipPosition="right"
        autofocus/>
    </div>
  </div>

when I use the app in Chrome the input box works fine, but on Microsoft Edge and Safari, it does not let me type into the input box. What could be causing this?

回答1:

I'm not sure what styling you have, but I was having this same issue, and it was due to this rule:

* {
  user-select: none;
}

which I had added because my UI encourages double-clicking some elements, and it looks bad when text is selected as a result.

anyway: removing this rule fixes the "can't input text in Edge" issue (I don't have a device with Safari handy, so can't comment on that browser). I'm also experimenting with the following rule instead:

*:not(input) {
  user-select: none;
}

not sure if it will work for everything I want, but may be perfect for your situation.