html - 当文本区域变脏时更改按钮

Question

当我编辑“textarea”时，我希望我的按钮改变它的颜色(或者能够从这里接收其他命令)。它是纯 CSS 还是我的代码中也有需要修改的地方？我自己找不到任何引用资料。

所以当“表单”变脏时，按钮将改变颜色-(我不具备类或 CSS 能力)

这是我的HTML:

<form name="formSignature" class="">
    <div>
      <i> Persönliche Signatur </i><br/>
      <textarea rows="5" cols="40" ng-model="newAccountSig" ng-trim="false" placeholder="{{user.signature}}">
      </textarea>
    </div>
    <div ng-hide="permissionExists('sign_change_global')">
    <i> Zweites Beispiel</i><br/>
    <textarea ng-readonly="true" rows="5" cols="40" ng-model="newCustomerSig" ng-trim="false" placeholder="{{user.customer.signature}}">
    </textarea>
    </div>

    <div ng-show="permissionExists('sign_change_global')">
      <i> Show this, when "sign_change_global" is in LIST</i><br/>
      <textarea rows="5" cols="40" ng-model="newCustomerSig" ng-trim="false" placeholder="{{user.customer.signature}}"></textarea>
    </div>
  </form>

应影响“表单”之外的按钮:

  <button type="submit" style="text-align:right; float:right"
           class="button green-button"
           ng-click="saveSignature()">Save</button>

我给表格加了边框，作为对我的一点提示。

Answer 1

试着给你的文本区域添加一个名字，例如:

<textarea rows="5" name="id1" cols="40" ng-model="newAccountSig" ng-trim="false" placeholder="{{user.signature}}">
  </textarea>

把它放在你的按钮里

ng-class="{' button green-button' : formSignature.id1.$pristine && formSignature.id2.$pristine && formSignature.id3.$pristine, 'button red-button' : !formSignature.id1.$pristine || !formSignature.id2.$pristine || !formSignature.id3.$pristine}"