jquery 输入字段聚焦 div答案

【问题标题】：jquery input field focusout divjquery 输入字段聚焦 div
【发布时间】：2016-12-31 22:33:57
【问题描述】：

在下面的脚本中：我正在创建一个选择选项下拉列表，

但是，如果在我选择的文本 val 事件不起作用之后，我在文本 id 上使用 focusout 事件！

任何替代解决方案？

块注释中的focusout事件

$(document).ready(function(){
        
        //droplist toggle
        $('#text').click(function(){
        	$('.droplist').toggle();
        });
        
         // text move to input field
         $('.droplist p').click(function(){
        		var selected = $(this).text();
        		$('#text').val(selected, $('.droplist').hide());			
         });
          
        // input field foucsout
        
        /*$('#text').focusout(function(){
        	$('.droplist').hide();
        });*/
         
 });

 #text{
        width:200px;
        height:35px;
        padding-left:10px;
        box-sizing: border-box;
        margin-bottom:3px;
  }
 .droplist{
        width:200px;
        background-color:#D8D8D8;
        border-radius:4px;
        padding:5px;
        position:absolute;
        box-sizing: border-box;
        font-family:arial;
        font-size:15px;
        display:none;
}

<!DOCTYPE html>
<html>
<head>
<script    src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>    

</head>
<body>
<div style="margin:20px;">
	<input type="text" id="text" autocomplete="off" placeholder="Select Option" />
	<div class="droplist">
		<p>option one</p>
		<p>option two</p>
		<p>option three</p>
		<p>option four</p>
		<p>option five</p>
	</div>
</div>
</body>
</html>

【问题讨论】：

我的第一个问题是……为什么？首先，带有 P 元素的 div 应该是一个列表（ul 和 li），或者更好的是，一个选择。正确制作表单，并使用 jQuery UI 创建可样式化的下拉菜单。

标签： javascript jquery css focus

【解决方案1】：

使用.val() 仅用于设置值。然后隐藏列表。

$("#text").val(selected);
$(".droplist").hide();

参考：http://api.jquery.com/val/

【讨论】：

【解决方案2】：

您应该为下拉菜单使用适当的标记

<select class="droplist" name="droplist" id="droplist">
    <option>option one</option>
    <option>option two</option>
    <option>option three</option>
    <option>option four</option>
    <option>option five</option>
</select>

【讨论】：

您无法为正确的下拉选择选项设置更多样式。

【解决方案3】：

你可以使用 setTimeout() 函数，因为 javaScript as besoin de temps pour l'execution de $('.droplist p').click();

$(document).ready(function(){       
  //droplist toggle
  $('#text').focus(function(event){
    event.stopPropagation();
    $('.droplist').toggle();
  });

  // text move to input field
  $('.droplist p').click(function(){
    var selected = $(this).text();
    $('#text').val(selected,$('.droplist').hide());
  });
  // input field foucsout
  $('#text').focusout(function(){
    window.setTimeout(function(){
      $('.droplist').hide();
    }, 100);
  });
 });

 #text{
        width:200px;
        height:35px;
        padding-left:10px;
        box-sizing: border-box;
        margin-bottom:3px;
        }
 .droplist{
        width:200px;
        background-color:#D8D8D8;
        border-radius:4px;
        padding:5px;
        position:absolute;
        box-sizing: border-box;
        font-family:arial;
        font-size:15px;
        display:none;
 }

 <!DOCTYPE html>
        <html>
        <head>
     <script    src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>    
    
        </head>
        		<body>
			<div style="margin:20px;">
				<input type="text" id="text" autocomplete="off" placeholder="Select Option" />
				<div class="droplist">
					<p>option one</p>
					<p>option two</p>
					<p>option three</p>
					<p>option four</p>
					<p>option five</p>
				</div>
			</div>
		</body>
        </html>

【讨论】：