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

How Can I grab an field with getElementById after a user types it?

本文关键字：字段 getElementById 获取 用户      更新时间：2023-09-26

我有一个颜色选择器字段，它加载了默认颜色，然后访问者可以使用色轮或仅通过更改文本来更改输入值。 我有javascript，它获取颜色选择器的值，并将其旁边的链接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</

每当值更改时执行该代码

$("#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;
});

尝试在文本框的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;
});

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=" + 颜色;
}

或执行此操作：

<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=" + 颜色;
}

相关文章：