javascript - 键入时输入字段值冻结

Question

我有一组用于输入颜色代码值的输入字段。例如“ #FF00FF ”

我想做的是在字段中选择和输入时，默认情况下“#”始终保持在那里。

Answer 1

试试这个（假设你正在使用jQuery）：

function onValueChange(e){
    var elem = $(e.target);
    if(elem.val().substr(0,1) != '#'){
        elem.val('#'+elem.val());
    }
}
$('input').on('keyup', onValueChange);

看到一个jsFiddle。

奖励：纯扩展版JavaScript

编辑：我替换e.originalTarget为e.target使其在外部运行Firefox

Answer 2

您可以将 # 放在输入字段之外并使用一些 css 使其看起来像在里面：

<div style="position:absolute; z-index:20; left:10px">#</div>
<input type="text" value="" style="padding-left:20px;"/>

添加更多字体样式以使其大小相同。然后在使用 javascript 读取值时，只需添加 #

Answer 3

首先，感谢您的帮助。
这似乎很麻烦，但它现在正在工作......以一种不整洁的方式:)

因此，通过上面的想法和调整，这就是我发现的工作。

首先，我将输入处理程序从

onblur="changeColour1(), picker_text_hide()"

添加到列表中

onkeyup="changeColour1(), picker_text_hide()"   

现在做所有工作的是changeColour1()函数，它就是这个

function changeColour1() {    
var colour = document.forms['edit_theme'].picker_text1.value;
colour = colour.replace(/[^a-f0-9]/gi, '').toUpperCase();   
if (colour.substr(0,1) != '#'){         
colour = '#'+colour;
document.forms['edit_theme'].picker_text1.value = colour;   
}
document.getElementById("me1").style.backgroundColor = colour; 
}       

所以现在我需要的只是一种简化代码的方法，因为我有 7 个这样的功能块来覆盖 7 个输入字段。:)