Question

我有一个使用默认颜色加载的colorpicker字段，然后访问者可以使用色轮或仅通过更改文本来更改输入值。我有javascript获取colorpicker的值并将其旁边的链接href设置为该值。

问题是当页面加载时，链接按钮被设置为颜色选择器中的默认值，但是当访问者更改此值时，链接href不会更改以反映此情况而不刷新。

以下是实际网站：http://www.brainbuzzmedia.com/themes/vertex/

这是我的javascript：

<script type="text/javascript">
$(document).ready(function(){

var a = document.getElementById('colorLink');
var color = document.getElementById('color-demo').value;
a.href = "http://www.brainbuzzmedia.com/themes/vertex/?color=" + color;

});
</script>

以下是添加了颜色选择器输入和链接的html：

<input type="text" name="color-demo" id="color-demo" value="#ff0000" class="colorfield regular-text" data-hex="true" onChange="refresh()"/><a href="" id="colorLink">LINK</

Answer 1

每当值发生变化时执行该代码

$("#color-demo").change(function() {
    var a = document.getElementById('colorLink');
    var color = document.getElementById('color-demo').value;
    a.href = "http://www.brainbuzzmedia.com/themes/vertex/?color=" + color;
});

Answer 2

document.getElementById（“color-demo”）。onblur = function（）{
  var a = document.getElementById（'colorLink'）;
  var color = document.getElementById（'color-demo'）。value;
  a.href =“http://www.brainbuzzmedia.com/themes/vertex/?color=”+ color;
  }

或者这样做：

<input type="text" name="color-demo" id="color-demo" value="#ff0000" class="colorfield regular-text" data-hex="true" onchange="Refresh(this.value)"/>

功能刷新（颜色）{
  var a = document.getElementById（'colorLink'）;
  a.href =“http://www.brainbuzzmedia.com/themes/vertex/?color=”+ color;
  }

Answer 3

尝试在文本框的KeyUp，KeyDown和Blur事件上设置值..就像这样..

$("#color-demo").bind("keyup keydown blur",{},function() {
    var a = document.getElementById('colorLink');
    var color = document.getElementById('color-demo').value;
    a.href = "http://www.brainbuzzmedia.com/themes/vertex/?color=" + color;
});

如何在用户输入后使用getElementById获取字段？

3 个答案: