फोकस ईवेंट इनपुट

पर आग लगने पर एचटीएमएल 5 डाटलिस्ट दिखाई दे रहा है क्योंकि कुछ लोग पहले से ही स्टाइल चुनने वाले तत्व को जानते हैं, एक दुःस्वप्न है, कुछ जावास्क्रिप्ट चाल के बिना सचमुच असंभव है। एचटीएमएल 5 में नया डाटलिस्ट उसी उद्देश्य की सेवा कर सकता है क्योंकि उपयोगकर्ता को विकल्पों की सूची के साथ प्रस्तुत किया जाता है और इनपुट इनपुट टेक्स्ट फ़ील्ड में दर्ज किया जाता है।फोकस ईवेंट इनपुट

यहां सीमा तब तक दिखाई नहीं दे रही है जब तक उपयोगकर्ता टेक्स्ट फ़ील्ड में कुछ टाइप करना शुरू नहीं कर लेता है और फिर भी उनके इनपुट के आधार पर केवल संभावित मिलान दिखाए जाते हैं। मैं जो व्यवहार चाहता हूं वह यह है कि जैसे ही फ़ील्ड पर ध्यान केंद्रित किया जाता है, विकल्पों की पूरी सूची दिखाई देगी।

तो मैं इस कोड है - view on jsbin

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>Input - Datalist</title> 
</head> 
<body> 
    <input list="categories"> 
    <datalist id="categories"> 
    <option value="Breakfast">Breakfast</option> 
    <option value="Brunch">Brunch</option> 
    <option value="Lunch">Lunch</option> 
    <option value="Dinner">Dinner</option> 
    <option value="Desserts">Desserts</option> 
    </datalist> 
</body> 
</html>

और मुझे लगता है कि इस जावास्क्रिप्ट के साथ दिखाने के लिए प्राप्त करने के लिए कोशिश कर रहा हूँ:

var catVal = document.getElementsByTagName("input")[0], 
    cat = document.getElementById("categories"); 

    catVal.style.fontSize = "1.3em"; 

    catVal.addEventListener("focus", function(event){ 
    cat.style.display = "block"; 
    }, false);

किसी भी मदद की सराहना की जाएगी,

चीयर्स

स्रोत

2013-03-25 forthehackofit

मैं इसे प्राप्त करने की कोशिश कर रहा हूं, क्या आपके पास अब तक कोई भाग्य है? – brillout

-1

एचटीएमएल:

<!DOCTYPE html> 
<html> 
<head> 
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 

    <meta charset=utf-8 /> 
    <title>Input - Datalist</title> 
</head> 
<body> 

    <input list="categories" id="categories2" type="text"> 
    <div id="result"></div> 
    <datalist id="categories"> 
    <option value="Breakfast">Breakfast</option> 
    <option value="Brunch">Brunch</option> 
    <option value="Lunch">Lunch</option> 
    <option value="Dinner">Dinner</option> 
    <option value="Desserts">Desserts</option> 
    </datalist> 
</body> 
</html>

jQuery:

var result=''; 
$(document).ready(function(){ 
    $('input[type=text]').focus(function(){ 
     $('#categories option').each(function(){ 
     result=result+" "+$(this).val(); 
     }); 

     $('#result').show().html(result); 
     $('input[type=text]').unbind('focus'); 
    }); 
    $('input[type=text]').blur(function(){ 
     $('#result').hide(); 
     $('input[type=text]').focus(function(){ 
      $('#result').show(); 
     }); 

    }); 
});

कार्य जे एस बिन

http://jsbin.com/urupit/4/watch

स्रोत

2013-03-26 20:36:47 writeToBhuwan

अच्छी सोच लेकिन यह मेरा व्यवहार नहीं है, क्योंकि हमारे यूएक्स के लिए हम धारक div नहीं बनाना चाहते हैं क्योंकि हमारे पास इनमें से कम से कम 3 इनपुट होंगे। मैं चाहता हूं कि इनपुट को फोकस ईवेंट प्राप्त होने पर दिखाएं। – forthehackofit

इनपुट प्रकार टेक्स्ट पर डबल क्लिक क्यों नहीं करें? यह पूरी सूची दिखाएगा। डेवलपर के रूप में – writeToBhuwan

मुझे पता है कि मुझे यह जानने के लिए क्या करना है, लेकिन यह उस उपयोगकर्ता के लिए स्पष्ट नहीं है जो इनपुट बॉक्स में एक बार क्लिक करने और टाइपिंग शुरू करने के लिए सबसे अधिक उपयोग किया जाता है, कारण मैं दूसरे को ट्रिगर करने का प्रयास कर रहा हूं जैसे ही वे – forthehackofit

मैं निम्नलिखित कोड का उपयोग करें:

<input name="anrede" 
    list="anrede" value="Herr" 
    onmouseover="focus();old = value;" 
    onmousedown = "value = '';" 
    onmouseup="value = old;"/> 

<datalist id="anrede"> 
    <option value="Herr" selected></option> 
    <option value="Frau"></option> 
    <option value="Fraulein"></option> 
</datalist>

माउसओवर:
सेट फोकस और एक में पुराने मूल्य याद - वैश्विक - चर

mousedown:
हटाएं मूल्य और datalist दिखाने (कार्यक्षमता में बनाया)

mouseup:
वर्ष मूल्य

पुनर्स्थापित

फिर नया मान चुनें।

यह एक combobox की ओर एक स्वीकार्य कामकाज खोजें।

स्रोत

2013-12-17 23:15:39

पर ध्यान केंद्रित करते हैं, क्लिक करें ओपी ने क्या किया है? – Tom

क्या किसी भी jquery कोड की आवश्यकता है। मुझे लगता है कि सूची सहयोगी के साथ डातालिस्ट और इनपुट आवश्यक (क्रोम में) करने के लिए पर्याप्त होगा या क्या यहां कोई ब्राउज़र संगतता समस्या है, मुझे याद आ रही है? – saurshaz

मुझे आशा है कि इस समाधान की तरह:

मैं भंडारण के लिए इनपुट क्षेत्र के लिए एक "अस्थायी" विशेषता को जोड़ कर एक बार माउस इनपुट पर घूमता दायर यह अस्थायी में अपने वर्तमान मूल्य को बचाने और उसके बाद मूल्य को नष्ट करेगा ताकि डेटलिस्ट को खोलने की अनुमति दी जा सके।

माउसआउट पर यह चर के तापमान से फ़ील्ड के मान को पुनर्स्थापित करेगा। यह समाधान क्रोमियम के तहत बहुत अच्छा काम करता है जिसे मैंने परीक्षण किया था।

<input value="Classic" list="myDatalist" temp="" onmouseover="this.temp=this.value; this.value='';" onmouseout="this.value=this.temp;"> 
    <datalist id="myDatalist" open="open"> 
    <option value="Internet Explorer"> 
    <option value="Firefox"> 
    <option value="Chrome"> 
    <option value="Opera"> 
    <option value="Safari"> 
    </datalist>

बोनस के रूप में आप एक जोड़ सकते हैं ...प्लेसहोल्डर = "अपने सभी विकल्पों को देखने के लिए क्लिक करें"

स्रोत

2017-10-25 12:48:22 user4723924

फोकस ईवेंट इनपुट

उत्तर

संबंधित मुद्दे