在用戶輸入時運行javascript函數

我通常不喜歡打擾你，但是我被困在某些東西上，我無法在任何地方找到答案，希望你們能幫助我！在用戶輸入時運行javascript函數

我正在構建一個web應用程序並對其進行設計，以便界面與iOS7匹配。 http://danj.eu/webdesign/new

我有一個輸入表單，我需要按鈕來提交表單，只有變成藍色，並在驗證完成後變成可選擇的。我寫了一些JS來驗證輸入，但這隻能運行一次！每次用戶修改輸入值時，都需要運行該函數。

這是我這麼遠的JS：

function validateInput(){   
if (document.getElementById('projectname').value.length < 2) 
    document.getElementById('forwardbutton').style.color = "#c4c4c5"; 
else 
    document.getElementById('forwardbutton').style.color = "#0e81ff"; 
}

謝謝你們！

來源

2013-10-08 Dan Johnson

jsFiddle Demo

您可以綁定到使用jQuery它處理幾乎同時所有輸入事件

<input id="myInput" type="text" /> 
<div id="output"></div>

JS輸入事件

$('#myInput').bind('input',function(){ 
if(this.value.length < 2){ 
    document.getElementById('output').style.color = "#c4c4c5"; 
}else{ 
    document.getElementById('output').style.color = "#0e81ff"; 
} 
$('#output').html(this.value); 
});

來源

2013-10-08 23:53:31

這太棒了！我會用你的答案，因爲它是我需要的完美選擇。感謝您花時間製作演示！ –

添加到您的輸入onchange聽衆：

var input = document.getElementById("myInput"); 
input.addEventListener('change', validateInput, false);

這將每次價值變動火validateInput功能。 PS。你應該緩存您在驗證功能讓你的DOM元素，因爲它的搜索通過DOM總能找到他們時，功能fired-這可以在一個大的DOM樹是沉重的

來源

2013-10-08 23:48:40 lukaleli

有一個在的getElementById一個錯字參數 – Ibu

是的，謝謝你的提示。現在編輯:) – lukaleli

完美！正是我在找的！非常感謝你的幫助:) –

你的意思

function validateInput(){   
if (document.getElementById('projectname').value.length < 2) 
    document.getElementById('forwardbutton').style.color = "#c4c4c5"; 
else 
    document.getElementById('forwardbutton').style.color = "#0e81ff"; 
}

然後也許這樣？

document.getElementById('projectname').onchange=validateInput;

更多的信息會對您有所幫助。

來源

2013-10-08 23:51:06

我不知道你是否反對jQuery，但我會提供jQuery的方式來做到這一點。 jQuery非常簡單。您將使用鍵盤事件處理程序，特別是Key Up event handler。

在您的事件處理程序中，您將檢查字段的長度並根據長度設置按鈕的啓用或禁用狀態。

$('#input-element').keyup(function() { 

    if (document.getElementById('projectname').value.length < 2) 
     document.getElementById('forwardbutton').style.color = "#c4c4c5"; 
    else 
     document.getElementById('forwardbutton').style.color = "#0e81ff"; 
    } 

});

您還可以使用jQuery來設置顏色或啓用狀態，而不是您以前的代碼。由你決定。

來源

2013-10-08 23:51:58 Ryan

在用戶輸入時運行javascript函數

回答

相關問題