jquery Eingabefeld focusout div

In Skript unten: ich wie eine wählen Sie die Option Droplist erschaffe,jquery Eingabefeld focusout div

Aber wenn ich focusout Ereignis auf Text-ID nach meinem ausgewählten Text val Ereignisse verwenden, funktioniert nicht!

Eine alternative Lösung?

focusout Ereignis in Block Kommentar

$(document).ready(function(){ 
 
     
 
     //droplist toggle 
 
     $('#text').click(function(){ 
 
     \t $('.droplist').toggle(); 
 
     }); 
 
     
 
     // text move to input field 
 
     $('.droplist p').click(function(){ 
 
     \t \t var selected = $(this).text(); 
 
     \t \t $('#text').val(selected, $('.droplist').hide()); \t \t \t 
 
     }); 
 
      
 
     // input field foucsout 
 
     
 
     /*$('#text').focusout(function(){ 
 
     \t $('.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;"> 
 
\t <input type="text" id="text" autocomplete="off" placeholder="Select Option" /> 
 
\t <div class="droplist"> 
 
\t \t <p>option one</p> 
 
\t \t <p>option two</p> 
 
\t \t <p>option three</p> 
 
\t \t <p>option four</p> 
 
\t \t <p>option five</p> 
 
\t </div> 
 
</div> 
 
</body> 
 
</html>

Quelle

2016-12-31 Farooq

Meine erste Frage ist ... Warum? Zuerst sollte das div mit P Elementen eine Liste sein (ul und li), oder noch besser, ein select. Machen Sie das Formular richtig und verwenden Sie jQuery UI, um styleable Dropdowns zu erstellen. – junkfoodjunkie

Verwenden .val() nur den Wert für die Einstellung. Dann verstecke die Liste.

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

Referenz: http://api.jquery.com/val/

Quelle

2016-12-31 23:03:48 johnniebenson

Sie sollten für die Dropdown richtigen Markup verwenden

<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>

Quelle

2017-01-01 23:02:23 Mikkel

Sie können nicht mehr Styling der richtigen Dropdown-Auswahloption vornehmen. – Farooq

Sie können setTimeout() Funktion, weil JavaScript verwenden, wie besoin de temps l'exécution de $ gießen (‘ .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> 
 
     \t \t <body> 
 
\t \t \t <div style="margin:20px;"> 
 
\t \t \t \t <input type="text" id="text" autocomplete="off" placeholder="Select Option" /> 
 
\t \t \t \t <div class="droplist"> 
 
\t \t \t \t \t <p>option one</p> 
 
\t \t \t \t \t <p>option two</p> 
 
\t \t \t \t \t <p>option three</p> 
 
\t \t \t \t \t <p>option four</p> 
 
\t \t \t \t \t <p>option five</p> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </body> 
 
     </html>

Quelle

2017-01-04 14:06:38 rapaelec

jquery Eingabefeld focusout div

Antwort

Verwandte Themen