Question

在我的应用程序中使用文本区域时，该文本区域在移动屏幕上变为“不可编辑”。在其他屏幕尺寸上没有问题。输入（文本）字段在手机上正常工作。

为什么在手机上无法编辑文本区域？我如何使其再次可编辑？

<div class="row">
  <div class="col-sm-12">
    <form #f="ngForm">
      <div class="form-group">
        <div class="row">
          <div class="col-sm-3"><label for="gcid">GcId</label></div>
          <!-- <div class="col-xs-9"><input type="text" id="gcid" name="gcid" [(ngModel)]="gcid" #gcid="ngModel" class="form-control"></div> -->
          <div class="col-sm-9 col-xs-10">
            <input type="text" id="gcid" name="gcid" [(ngModel)]="gcid" required class="form-control" #v_gcid="ngModel">
            <span *ngIf="!v_gcid.valid && v_gcid.touched" class="text-danger">GC mag niet leeg zijn. Vul een geldige GC code in. </span>
          </div>
          <div class="clearfix visible-sm-block"></div>
        </div>
      </div>   
      ...     
      <div class="form-group col-xs-11">
        <div class="row">
        <label for="description">Description</label>
        <textarea rows="3" id="description" name="description" [(ngModel)]="description" class="form-control"></textarea>
        </div>
      </div>
      <div class="form-group col-xs-11">
        <div class="row">
        <label for="hint">Hint</label>
        <textarea rows="4" id="hint" name="hint" [(ngModel)]="hint" class="form-control"></textarea>
        </div>
      </div>

Answer 1

我认为这可能与以下事实有关：包含<div class="row">的{{1}}元素没有正确的行/列/组嵌套。尝试重组HTML这样，看看有没有什么帮助的原因。

textarea

正如我在评论中提到的，这篇文章给了我一个主意：Bootstrap 3 inputs read-only in desktop mode but not on small devices。

您还可以尝试将<div class="row"> <div class="col-xs-11"> <div class="form-group"> <label for="description">Description</label> <textarea rows="3" id="description" name="description" [(ngModel)]="description" class="form-control"></textarea> </div> </div> </div>属性添加到contenteditable="true"来查看是否有效。它不应该需要它，但可以帮助强制移动屏幕执行所需的操作。

Bootstrap 3-textarea在移动屏幕上不可编辑（但在其他屏幕上可编辑）

1 个答案: