键入时输入字段值冻结

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。

奖金：Extended Version in pure 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

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

所以从上面的想法和调整，这是我发现的工作。

首先我从

改变了我的输入handeler

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; 
}       

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