如何在用戶輸入時顯示提示框或工具提示？

我有大約1000個文本框我們的頁面上，並且需要顯示用戶當前正在鍵入文本字段上的工具提示。如何在用戶輸入時顯示提示框或工具提示？

這聽起來很簡單，但我有困難，搞清楚如何來顯示它在頂部而不會破壞文檔的流動。

我不能使用這方面的任何外部庫或者，這使得它有點難度。我只允許使用純JS（或編譯爲純JS的語言，如TypeScript）。

沒有人有任何聯繫，教程之類的東西？這將是非常有益的。

謝謝

編輯： 我知道，你可以使用title屬性的元素，然而，這提示需要有比它裏面不僅僅是文本，需要更大的正上方的文本框。

來源

2012-10-29 Arrow

像這樣的東西可以幫助你：

http://jsfiddle.net/ysuw5/

<div id="container"> 
    <input type="text" class="tooltip" onfocus="theFocus(this);" onblur="theBlur(this);" title="asdf" /><br /> 
    <input type="text" class="tooltip" onfocus="theFocus(this);" onblur="theBlur(this);" title="asdf2" /><br /> 
    <input type="text" class="tooltip" onfocus="theFocus(this);" onblur="theBlur(this);" title="asdf3" /><br /> 
    <input type="text" class="tooltip" onfocus="theFocus(this);" onblur="theBlur(this);" title="asdf4" /><br /> 

    <div id="tooltip"></div> 
</div> 

function theFocus(obj) { 
    var tooltip = document.getElementById("tooltip"); 
    tooltip.innerHTML = obj.title; 
    tooltip.style.display = "block"; 
    tooltip.style.top = obj.offsetTop - tooltip.offsetHeight + "px"; 
    tooltip.style.left = obj.offsetLeft + "px"; 
} 

function theBlur(obj) { 
    var tooltip = document.getElementById("tooltip"); 
    tooltip.style.display = "none"; 
    tooltip.style.top = "-9999px"; 
    tooltip.style.left = "-9999px"; 
}

這顯然是非常狹隘的，將需要進行修改，以適應正是你需要的。我沒有用Javascript綁定focus和blur事件 - 這會比將它們放入HTML中更好。

來源

2012-10-29 07:01:23 Ian

嘿！太棒了，我喜歡它。謝謝@ianpgall :-) – Arrow

我不認爲這滿足條件「這一提示需要有比它裏面不僅僅是文本」，爲'title'屬性值是純文本。 –

@ JukkaK.Korpela非常真實，我不確定我是如何錯過/忘記了 – Ian

您可以以多種方式使用「CSS工具提示」。一個比較簡單的想法是將提示內容放置在div之前，最初隱藏在CSS之前。然後，你需要一個onfocus事件處理程序，改變了div可見（和onblur處理器，使得它再次隱形）。您將有一個提示和字段的容器，並將該容器聲明爲相對位置，以便可以將提示「絕對地」（即相對於容器）進行定位。

例（jsfiddle）：

<!DOCTYPE HTML> 
<meta charset=utf-8> 
<style> 
.textfield { 
    position: relative; 
} 
.textfield .hint { 
    display: none; 
    position: absolute; 
    width: 10em; 
    bottom: 1.3em; 
    background: #ff9; 
    padding: 0 0.2em; 
    border: solid 1px; 
} 
</style> 
<script> 
function hint(elem) { 
    elem.parentNode.firstElementChild.style.display = 'block'; 
} 
function unhint(elem) { 
    elem.parentNode.firstElementChild.style.display = 'none'; 
} 
</script> 
<p>This is just some filler text. 
<table> 
<tr> 
    <td><label for=bar>Bar</label> 
    <td> 
    <div class=textfield> 
    <div class=hint>This is hint text for the Bar field.</div> 
    <input id=bar name=bar onfocus="hint(this)" onblur="unhint(this)"> 
    </div> 
<tr> 
    <td><label for=foo>Foo</label> 
    <td> 
    <div class=textfield> 
    <div class=hint>This is hint text for the Bar field.</div> 
    <input id=foo name=foo onfocus="hint(this)" onblur="unhint(this)"> 
    </div> 
</table>

（當使用一個表來structurize的形式，在這種方法中，你需要記住，CSS定位不適用於表格單元工作，這就是爲什麼你不能使用在td元素的包裝，但需要使用div裏面。）

來源

2012-10-29 07:28:27

如何在用戶輸入時顯示提示框或工具提示？

回答

相關問題