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.targetFirefox

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 つあるため、必要なのはコードをストリームライン化する方法だけです。:)