在文本框焦点上显示框,包装文本框

时间:2009-11-02 12:15:47

标签: jquery css

实际上,向您展示我想要实现的目标并不是试图解释会更容易。

州1:  enter image description here

领域负责人没有关注。很简单。

州2: enter image description here

领域负责人得到了关注。 div显示在文本框和文本周围。

显示灰色框并定位它没有问题。问题是文本框显示在框内,但仍保持其当前位置。

当文本框被定位为绝对(尝试z-index)时,内容正在被搞乱。

我正在使用jQuery。

任何想法?

2 个答案:

答案 0 :(得分:1)

您无需为文本框指定绝对位置。只需给它位置:relative并设置zIndex,使其位于灰色框的顶部。如果它有位置:静态(默认)zIndex将不起作用。

答案 1 :(得分:1)

你看过jQuery Tools Expose吗?


以下是使用鼠标悬停的Expose的一些代码...我还在此pastebin

发布了一个示例
$(function() {
 $("#test").hover(
  function() {
   $(this).expose({api: true}).load()
  }, function() {
   $(this).expose().close();
 });
});

编辑:对不起,这是关注焦点和代码的代码。模糊:

$(function() {
 $("#test")
  .focus(function() {
   $(this).expose({api: true}).load();
  })
  .blur(function() {
   $(this).expose().close();
  });
});

编辑#3:仅仅因为我有OCD并且不能让LOL挂起......我制作了一个脚本,可以在不使用Expose的情况下执行您想要的操作(也可以在this pastebin发布)。如果需要,您可以添加淡入和淡出。

CSS

input, select { width: 200px; }
#expose {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: #444;
 z-index: 99;
}
.focused {
 position: relative;
 top: 0;
 left: 0;
 z-index: 100;
}
label.focused {
 color: #ddd;
}

HTML(我试图模仿你的图像)

<fieldset><legend>Fields</legend>
<label for="frespon">Responsibilites:</label><br/>
<input type="text" id="frespon" class="expose" /><br/>
<br/>

<label for="fprojectid">ProjectID:</label><br/>
<select id="fprojectid" class="expose">
 <option value='-'>-</option>
</select><br/>
<br/>

<label for="fstatusid">StatusID:</label><br/>
<select id="fstatusid" class="expose">
 <option value='-'>-</option>
</select><br/>
<br/>

<label for="ftypeid">TypeID:</label><br/>
<select id="ftypeid" class="expose">
 <option value='-'>-</option>
</select><br/>
<br/>

<label for="ftitle">Title:</label><br/>
<input type="text" id="ftitle" class="expose" /><br/>
</fieldset>

脚本

$(document).ready(function(){
 $('.expose').focus(function(){
  $('<div></div>')
   .attr('id','expose')
   .appendTo('body');
  $(this).addClass('focused')
   .parent().find('label[for="' + this.id + '"]').addClass('focused');
 })
 $('.expose').blur(function(){
  $('.expose').removeClass('focused')
   .parent().find('label[for="' + this.id + '"]').removeClass('focused');
  $('#expose').remove();
 })
})