Question

我需要帮助，我有div喜欢这个

<div id="namacoc" tabindex="1" class="filled-text" placeholder="Input your name" contenteditable ></div>
<div id="position" tabindex="1" class="filled-text" placeholder="Input your position" contenteditable></div>    
<button type="button" id="btncontinue" class="btn btn-wide btn-blue">Continue</button>

我的问题是，我想检查div就像验证一样。 示例：如果namecoc没有value。当namecoc的值为div namecoc时，red会将颜色更改为normal color (black)，而我选择另一个div或按下按钮。

注意：我使用div，而不是输入表单，导致bootstrap不会在活动时更改我的文本背景颜色。所以我使用div。对不起，我的英语太差了。

Answer 1

我建议您仅使用input，内容可编辑确实存在不同浏览器的问题。

请尝试这样做。

$("#btncontinue").click(function() {
  $("input").each(function() {
    $.trim($(this).val()) == "" ?
      $(this).addClass("invalid") : $(this).removeClass("invalid");
  });
});

$("input").on("blur", function() {
  $.trim($(this).val()) == "" ?
    $(this).addClass("invalid") : $(this).removeClass("invalid");
});

.invalid {
  border: red 1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="namacoc" tabindex="1" class="filled-text" placeholder="Input your name" contenteditable></input>
<input id="position" tabindex="1" class="filled-text" placeholder="Input your position" contenteditable></input>
<button type="button" id="btncontinue" class="btn btn-wide btn-blue">Continue</button>

Answer 2

Array.prototype.forEach.call(document.querySelectorAll(".filled-text"), function (node) {
  node.onfocus = function () {
    this.className += " active";

    var text = this.innerHTML;

    if ((this.id === "namacoc"  && text === "Input your name") ||
        (this.id === "position" && text === "Input your position")) {

      this.innerHTML = "";
    }
  };

  node.onblur = function () {
    this.className = this.className.replace(" active", "");

    if (this.innerHTML === "") {
      if (this.id === "namacoc") {
        this.innerHTML = "Input your name";
      } else {
        this.innerHTML = "Input your position";
      }

      this.className = this.className.replace(" normal", "") + " empty";
    } else {
      this.className = this.className.replace(" empty", "") + " normal";
    }
  };
});

.filled-text {
  width: 200px;
  padding: 8px;
  margin: 24px 0;
  border: 1px solid #000;
}

.filled-text.placeholder {
  color: #d0d0d0;
}

.filled-text.empty {
  color: red;
}

.filled-text.active,
.filled-text.normal {
  color: #000;
}

<div id="namacoc"  class="filled-text placeholder" contenteditable>Input your name</div>
<div id="position" class="filled-text placeholder" contenteditable>Input your position</div>

使用条件值更改div颜色

2 个答案: