把一個隱藏的盒子放入一個焦點輸入與jquery

我想知道如何將一個隱藏的盒子div放入當前焦點的輸入文本？把一個隱藏的盒子放入一個焦點輸入與jquery

 <input type="text" class="target" name="some_name"> 
     <input type="text" class="target" name="other_name"> 
     <input type="text" class="target" name="another_name"> 
     <input type="text" class="target" name="some_other_name"> 

     other HTML .... 


     <div id="hidden">This div is hidden somewhere in the page, 
    and only visible if any of the above input text is in focus. 
    Once another input is in focus, this box is moved 
relatively positioned (next, top or bottom) to the focus input. 
    This should be hidden if no input is in focus.</div>

我注意到一個插件：http://benalman.com/projects/jquery-outside-events-plugin/ 但不知道如果這是我需要的。

任何暗示或方向是非常讚賞。由於

來源

2012-02-03 swan

...放置一個隱框格成輸入文本...

input元素不能有子元素，所以你不能把它內 DOM中的意義。你可以把它輸入的頂部，如：

$("input").focus(function() { 
    var pos = $(this).offset(); 
    $("#hidden") 
     .data("showing-for", this.name) 
     .css({ 
      position: "absolute", 
      left:  pos.left + "px", 
      top:  pos.top + "px" 
     }) 
     .show(); 
}).blur(function() { 
    var hidden = $("#hidden"); 
    if (hidden.data("showing-for") === this.name) { 
     hidden.hide(); 
    } 
});

Live copy

在那裏，我們正在使用offset得到聚焦輸入的位置，然後定位「隱藏」 div在它的上面並展示它;在blur我們再次隱藏它。我們使用data來記住div顯示哪個輸入，因此只有當我們看到正確的blur（只是防守）時我們纔會隱藏它。

（請注意，我假設在div的id值將是"hidden"，不"#hidden"在你的HTML例子，你不寫在id屬性的哈希標記（#），這僅僅是CSS指標那跟在是id在選擇器。）

來源

2012-02-03 11:39:26

謝謝。現在將進行測試。我已經澄清了我的問題，對不清楚的問題感到抱歉。 – swan 2012-02-03 11:43:34

我修改爲$（「input.target」）....，但隱藏的div是用類「目標」替換我的輸入文本。也許我錯過了什麼 – swan 2012-02-03 11:56:17

嗯，我的問題是這些輸入被放置在許多fieldset，其他divs和表單項。實際上並沒有取代，但隱藏的div位置並不好： element.style { display：none;/*這改變了阻止對焦，很好*/ left：494.767px; position：absolute; top：1029.68px; } – swan 2012-02-03 12:07:34

把一個隱藏的盒子放入一個焦點輸入與jquery

回答

相關問題