Question

当用户输入的文本太长时，我想给他们一个视觉提示。对于编辑，我使用jEditable。

我的代码似乎没有运行，但是当我使用F8暂停时，我可以看到边框明显改变了颜色，然后又变回了默认值。

如果将边框设置为8px（请参见示例），则可以看到它正常工作，但同时也保留了黑色边框。

如何用所选颜色绘制黑色边框？

$(document).ready(function() {
  $('.nameoncard').editable('/test/updatename/', {
    cancel: 'Cancel',
    submit: 'OK',
    style: 'inherit',
    tooltip: 'Click to edit...'
  });

  $(".nameoncard").on("keyup", "input", function() {
    let nameLength = $(this).val().length;
    let colour = "#468847";

    if (nameLength > 30) {
      colour = "#b94a48";
    } else if (nameLength > 20) {
      colour = "#c09853";
    }
    $(this).css("border", "8px solid " + colour);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jeditable.js/1.7.3/jeditable.min.js"></script>

<table>
  <tr>
    <td class="nameoncard" id="nameoncard8044" title="Click to edit...">Jack Flimsy</td>
  </tr>
</table>

jEditable覆盖CSS边框颜色更改

0 个答案: