如何设置input =“color”

时间：2017-10-24 08:39:50

标签： javascript jquery

如何在输入input(.color-scheme__log-input-text)时设置input =“color”的值，例如，如果我输入#060606 - 此颜色必须应用于input="color"

какизменитьцветinput=“color”привводезначениявcolor-scheme__log-input-text 

$(".color-scheme__log-input-text").on("keypress", function() {
  var self = $(this);
  if (self.val().length < 7) {
    if (self.val()[0] != "#") {
      self.val("#" + self.val());
    }
    var color = self.val();
    $(".color-scheme__log-btn-text").val(color);
  } else {
    return false;
  }
});
.color-scheme {
  display: flex;
  flex-wrap: wrap;
}

.color-scheme__container {
  display: flex;
}

.color-scheme__item {
  width: 100%;
}

.color-scheme__column:first-of-type {
  width: 140px;
  margin-right: 15px;
}

.color-scheme__column:last-of-type {
  display: flex;
  align-items: center;
}

.color-scheme__input-color {
  display: block;
  height: auto !important;
  border-radius: 5px !important;
  padding: 10px;
  font-size: 15px;
  width: 140px;
}

.color-scheme__color-container {
  position: relative;
  margin-right: 10px;
  overflow: hidden;
  width: 35px;
  height: 35px;
  border-radius: 50%;
}

.color-scheme__input-color-pick {
  position: absolute;
  right: -5px;
  top: -7px;
  width: 48px;
  height: 48px;
  border: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="color-scheme__container">
  <div class="color-scheme__column">
    <input type="text" class="color-scheme__input-color color-scheme__log-input-text" name="login_but_text">
  </div>
  <div class="color-scheme__column">
    <div class="color-scheme__color-container">
      <input id="input-color-6" class="color-scheme__input-color-pick color-scheme__log-btn-text" value="#000" type="color">
    </div>
    <label class="color-scheme__input-color-label" for="input-color-6">click to pick color</label>
  </div>
</div>

3 个答案:

答案 0 :(得分：2)

试试这个

$(".color-scheme__log-input-text").on("keyup", function() {
  var self = $(this);
  if (self.val().length <= 7) {
    if (self.val()[0] != "#") {
      self.val("#" + self.val());
    }
    var color = self.val();
    $("#input-color-6").val(color);
  } else {
    return false;
  }
});
.color-scheme {
  display: flex;
  flex-wrap: wrap;
}

.color-scheme__container {
  display: flex;
}

.color-scheme__item {
  width: 100%;
}

.color-scheme__column:first-of-type {
  width: 140px;
  margin-right: 15px;
}

.color-scheme__column:last-of-type {
  display: flex;
  align-items: center;
}

.color-scheme__input-color {
  display: block;
  height: auto !important;
  border-radius: 5px !important;
  padding: 10px;
  font-size: 15px;
  width: 140px;
}

.color-scheme__color-container {
  position: relative;
  margin-right: 10px;
  overflow: hidden;
  width: 35px;
  height: 35px;
  border-radius: 50%;
}

.color-scheme__input-color-pick {
  position: absolute;
  right: -5px;
  top: -7px;
  width: 48px;
  height: 48px;
  border: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="color-scheme__container">
  <div class="color-scheme__column">
    <input type="text" class="color-scheme__input-color color-scheme__log-input-text" name="login_but_text">
  </div>
  <div class="color-scheme__column">
    <div class="color-scheme__color-container">
      <input id="input-color-6" class="color-scheme__input-color-pick color-scheme__log-btn-text" value="" type="color">
    </div>
    <label class="color-scheme__input-color-label" for="input-color-6">click to pick color</label>
  </div>
</div>

它应为if (self.val().length <= 7)并使用keyup代替keypress，因为如果您使用keypress，您刚刚按下的键尚未添加到当前值..

答案 1 :(得分：2)

您可以在change event上为文本框设置此项。 我已将以下部分添加到下面的代码段中。 

   $(".color-scheme__log-input-text").on("change", function() {
    var color = $(this).val();
    $("#input-color-6").value = color;
    $(".color-scheme__log-btn-text").val(color);
  });


$(".color-scheme__log-input-text").on("keypress", function() {
  var self = $(this);
  if (self.val().length < 7) {
    if (self.val()[0] != "#") {
      self.val("#" + self.val());
    }
    var color = self.val();
    $(".color-scheme__log-btn-text").val(color);
    
  } else {
    return false;
  }
});

   $(".color-scheme__log-input-text").on("change", function() {
var color = $(this).val();
$("#input-color-6").value = color;
$(".color-scheme__log-btn-text").val(color);
  });
.color-scheme {
  display: flex;
  flex-wrap: wrap;
}

.color-scheme__container {
  display: flex;
}

.color-scheme__item {
  width: 100%;
}

.color-scheme__column:first-of-type {
  width: 140px;
  margin-right: 15px;
}

.color-scheme__column:last-of-type {
  display: flex;
  align-items: center;
}

.color-scheme__input-color {
  display: block;
  height: auto !important;
  border-radius: 5px !important;
  padding: 10px;
  font-size: 15px;
  width: 140px;
}

.color-scheme__color-container {
  position: relative;
  margin-right: 10px;
  overflow: hidden;
  width: 35px;
  height: 35px;
  border-radius: 50%;
}

.color-scheme__input-color-pick {
  position: absolute;
  right: -5px;
  top: -7px;
  width: 48px;
  height: 48px;
  border: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="color-scheme__container">
  <div class="color-scheme__column">
    <input type="text" class="color-scheme__input-color color-scheme__log-input-text" name="login_but_text">
  </div>
  <div class="color-scheme__column">
    <div class="color-scheme__color-container">
      <input id="input-color-6" class="color-scheme__input-color-pick color-scheme__log-btn-text" value="#000" type="color">
    </div>
    <label class="color-scheme__input-color-label" for="input-color-6">click to pick color</label>
  </div>
</div>

答案 2 :(得分：2)

您应该使用keyup而不是keypress，因为keypress会在您按下的键输入输入之前触发代码。

$(".color-scheme__log-input-text").on("keyup", function()

<强>演示 

$(".color-scheme__log-input-text").on("keyup", function() {
  var self = $(this);
  if (self.val().length <= 7) {
    if (self.val()[0] != "#") {
      self.val("#" + self.val());
    }
    var color = self.val();
    $("#input-color-6").val(color);
  } else {
  self.val(self.val().slice(0,-1))
    return false;
  }
});
.color-scheme {
  display: flex;
  flex-wrap: wrap;
}

.color-scheme__container {
  display: flex;
}

.color-scheme__item {
  width: 100%;
}

.color-scheme__column:first-of-type {
  width: 140px;
  margin-right: 15px;
}

.color-scheme__column:last-of-type {
  display: flex;
  align-items: center;
}

.color-scheme__input-color {
  display: block;
  height: auto !important;
  border-radius: 5px !important;
  padding: 10px;
  font-size: 15px;
  width: 140px;
}

.color-scheme__color-container {
  position: relative;
  margin-right: 10px;
  overflow: hidden;
  width: 35px;
  height: 35px;
  border-radius: 50%;
}

.color-scheme__input-color-pick {
  position: absolute;
  right: -5px;
  top: -7px;
  width: 48px;
  height: 48px;
  border: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="color-scheme__container">
  <div class="color-scheme__column">
    <input type="text" class="color-scheme__input-color color-scheme__log-input-text" name="login_but_text">
  </div>
  <div class="color-scheme__column">
    <div class="color-scheme__color-container">
      <input id="input-color-6" class="color-scheme__input-color-pick color-scheme__log-btn-text" value="#000" type="color">
    </div>
    <label class="color-scheme__input-color-label" for="input-color-6">click to pick color</label>
  </div>
</div>

相关问题
最新问题