如何在文本輸入到輸入時顯示框？

請看看這個的jsfiddle鏈接：如何在文本輸入到輸入時顯示框？

http://jsfiddle.net/PDnnK/4/

正如你可以看到有

輸入字段 & BOX

我想只有當文本中輸入框出現輸入。

這是如何完成的？

謝謝！

詹姆斯

來源

2011-11-22 James

如果我知道我不會問。我會尋找什麼來幫助我呢？ – James

可能類似於'onkeyup =「document.getElementById（'box'）。css.visibility =（this.value.length> 0）？'none'：'block'' on input field。 –

像這樣的東西用jQuery：

$("#id-of-input").change(function() { $("#id-of-box"}.css('display', 'block'); });

或更改.change到。點擊

來源

2011-11-22 19:48:40 lfxgroove

啓動開箱與display: none。然後，您可以捕捉到keypress事件輸入：

document.getElementById('myInput').onkeypress = function() { 
    document.getElementById('myBox').style.display = 'block'; 
}

來源

2011-11-22 19:49:46

check out：http： //jsfiddle.net/PDnnK/23/我用你的幫助，但它仍然無法正常工作，我是否正確地使用它？ – James

這是因爲你的id不匹配（HTML和JavaScript）。 –

綁定到「變」通常不是超級好用，因爲它通常不火，直到選項卡或點擊元素了。

但是，輪詢也不是答案。

原來的答案： http://jsfiddle.net/xNEZH/2/

超夢幻新的答案： http://jsfiddle.net/4MhKU/1/

$('.input1').bind('mouseup keyup change cut paste', function(){ 
    setTimeout(function(){ 
     var hasInput = $('.input1').val() != ""; 
     $('.box')[hasInput ? 'show' : 'hide'](); 
    }, 20); 
});

的setTimeout的是，因爲剪切和粘貼事件觸發的文本之前被切斷或粘貼。

來源

2011-11-22 19:58:51 Dennis

感謝！它在jsfiddle中很好用，但當我在我的代碼和瀏覽器中使用它時，它不起作用我正在使用最新版本的chrome和safari爲什麼會這樣呢 – James

如果他使用jQuery，你的輪詢函數也使用它，大部分的鍵和鼠標事件都被正常化了，我會毫不猶豫地使用它們;我不打算不相信你，但是我想知道什麼可重現的情況（使用jQuery）暴露鍵/鼠標事件不可靠？ –

詹姆斯 - 兩個最有可能的原因在jsfiddle之外，你不會爲你工作：1.在你嘗試運行這段代碼之前，你沒有找到jquery。 2.你沒有運行這個代碼。 – Dennis

如何在文本輸入到輸入時顯示框？

回答

相關問題