2

How to set value for input="color" when typing in input(.color-scheme__log-input-text), for example if I type #060606 - this color have to be applied to 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>

Improve this question
1
  • First self.val().length <= 7 should be less or equal. Commented Oct 24, 2017 at 8:48

3 Answers 3

Reset to default
2

Try this

$(".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>

It should be if (self.val().length <= 7) and use keyup instead of keypress because if you use keypress the key you've just be pressed is not yet added to the current value..

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

It doesn't work, I type in input #060606 but input='color' still black color
@DimaVleskov i've tried yellow #ffff00 and maroon #800000 and they are working..
i tried this colors yellow #ffff00 and maroon #800000 too, and everything works but some color no, I'm a little bit confused
i've search #060606 and the result is black. Try a different value. and a valid one.
@DimaVleskov i've tried a random like #ff8212 and it displays it.
|
2

You can set this on change event for the textbox. I have added below part to the snippet below. 

 $(".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>

Improve this answer

Comments

2

You should use keyup and not keypress because keypress will fire your code before the value of the key your pressing has been entered into the input.

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

Demo

$(".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>

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.