javascript - एक बटन को ट्रिगर करें टेक्स्ट बॉक्स में एंटर कुंजी पर जावास्क्रिप्ट के साथ क्लिक करें




button onclick (16)

आधुनिक जेएस के साथ keypress और event.key प्रयोग करें!

const textbox = document.getElementById("txtSearch");
textbox.addEventListener("keypress", function onEvent(event) {
    if (event.key === "Enter") {
        document.getElementById("btnSearch").click();
    }
});

मोज़िला डॉक्स

समर्थित ब्राउज़र

मेरे पास एक टेक्स्ट इनपुट और एक बटन है (नीचे देखें)। टेक्स्ट बॉक्स के अंदर एंटर कुंजी दबाए जाने पर मैं बटन के क्लिक ईवेंट को ट्रिगर करने के लिए जावास्क्रिप्ट का उपयोग कैसे कर सकता हूं?

मेरे वर्तमान पृष्ठ पर पहले से ही एक अलग सबमिट बटन है, इसलिए मैं बटन को सबमिट बटन नहीं कर सकता। और, मैं केवल इस विशिष्ट बटन पर क्लिक करने के लिए एंटर कुंजी चाहता हूं अगर इसे इस टेक्स्ट बॉक्स में से दबाया गया है, और कुछ नहीं।

<input type="text" id="txtSearch" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />

JQuery के साथ ऐसा करने के लिए:

$("#txtSearch").on("keyup", function (event) {
    if (event.keyCode==13) {
        $("#btnSearch").get(0).click();
    }
});

सामान्य जावास्क्रिप्ट के साथ ऐसा करने के लिए:

document.getElementById("txtSearch").addEventListener("keyup", function (event) {
    if (event.keyCode==13) { 
        document.getElementById("#btnSearch").click();
    }
});

Jquery मोबाइल के लिए मुझे करना था

$('#id_of_textbox').live("keyup", function(event) {
    if(event.keyCode == '13'){
    $('#id_of_button').click();
    }
});

इस मामले में आप पोस्टिंग से सर्वर पर एंटर बटन भी डायल करना चाहते हैं और जेएस स्क्रिप्ट निष्पादित करना चाहते हैं।

<input type="text" id="txtSearch" onkeydown="if (event.keyCode == 13)
 {document.getElementById('btnSearch').click(); return false;}"/>
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />

उन लोगों के लिए जो ब्रेवटी और आधुनिक जेएस दृष्टिकोण पसंद कर सकते हैं।

input.addEventListener('keydown', (e) => {if (e.keyCode == 13) doSomething()});

जहां इनपुट एक वैरिएबल है जिसमें आपका इनपुट तत्व होता है।


किसी ने भी HTML एटिब्यूट "accesskey" को देखा जो कुछ समय से उपलब्ध है।

यह कीबोर्ड शॉर्टकट सामग्री के लिए कोई जावास्क्रिप्ट तरीका नहीं है।

Accesskey एमडीएन पर शॉर्टकट विशेषताएँ

इस तरह इस्तेमाल करने का इरादा है। HTML विशेषता स्वयं पर्याप्त है, हम ब्राउज़र और ओएस के आधार पर प्लेसहोल्डर या अन्य सूचक को कैसे बदल सकते हैं। एक विचार देने के लिए लिपि एक अवांछित स्क्रैच दृष्टिकोण है। आप छोटे ब्राउज़र वाले ब्राउज़र लाइब्रेरी डिटेक्टर का उपयोग करना चाह सकते हैं

let client = navigator.userAgent.toLowerCase();
    isLinux = client.indexOf("linux") > -1;
    isWin = client.indexOf("windows") > -1;
    isMac = client.indexOf("apple") > -1;
    isFirefox = client.indexOf("firefox") > -1;
    isWebkit = client.indexOf("webkit") > -1;
    isOpera = client.indexOf("opera") > -1;
    input = document.getElementById('guestInput');

if(isFirefox) {
   input.setAttribute("placeholder", "Access keys: ALT+SHIFT+Z");
} else if (isWin) {
   input.setAttribute("placeholder", "Access keys: ALT+Z");
} else if (isMac) {
  input.setAttribute("placeholder", "Access keys: CTRL+ALT+Z");
} else if (isOpera) {
  input.setAttribute("placeholder", "Shortcut: SHIFT+ESCAPE->Z");
} else {'Point me to operate...'}
<input type="text" id="guestInput" accesskey="z" placeholder="Acces shortcut:"></input>


प्रत्येक बार एंटर कुंजी दबाए जाने पर एक खोज ट्रिगर करने के लिए, इसका उपयोग करें:

$(document).keypress(function(event) {
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if (keycode == '13') {
        $('#btnSearch').click();
    }
}

फिर बस इसे कोड करें!

<input type = "text"
       id = "txtSearch" 
       onkeydown = "if (event.keyCode == 13)
                        document.getElementById('btnSearch').click()"    
/>

<input type = "button"
       id = "btnSearch"
       value = "Search"
       onclick = "doSomething();"
/>

यह onchange प्रयास करीब है, लेकिन आगे ब्राउज़र के संबंध में दुर्व्यवहार करता है (सफारी 4.0.5 और फ़ायरफ़ॉक्स 3.6.3 पर), आखिरकार, मैं इसकी अनुशंसा नहीं करता।

<input type="text" id="txtSearch" onchange="doSomething();" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />

यह पता लगाया:

<input type="text" id="txtSearch" onkeypress="return searchKeyPress(event);" />
<input type="button" id="btnSearch" Value="Search" onclick="doSomething();" />

<script>
function searchKeyPress(e)
{
    // look for window.event in case event isn't passed in
    e = e || window.event;
    if (e.keyCode == 13)
    {
        document.getElementById('btnSearch').click();
        return false;
    }
    return true;
}
</script>

यह सभी YUI प्रेमियों के लिए एक समाधान है:

Y.on('keydown', function() {
  if(event.keyCode == 13){
    Y.one("#id_of_button").simulate("click");
  }
}, '#id_of_textbox');

इस विशेष मामले में मैंने यूओआई का उपयोग करके डीओएम ऑब्जेक्ट्स को ट्रिगर करने के लिए बेहतर परिणाम प्राप्त किए हैं जिन्हें बटन कार्यक्षमता से इंजेक्शन दिया गया है - लेकिन यह एक और कहानी है ...


सादा जावास्क्रिप्ट में,

if (document.layers) {
  document.captureEvents(Event.KEYDOWN);
}

document.onkeydown = function (evt) {
  var keyCode = evt ? (evt.which ? evt.which : evt.keyCode) : event.keyCode;
  if (keyCode == 13) {
    // For Enter.
    // Your function here.
  }
  if (keyCode == 27) {
    // For Escape.
    // Your function here.
  } else {
    return true;
  }
};

मैंने देखा कि उत्तर केवल jQuery में दिया गया है, इसलिए मैंने सादा जावास्क्रिप्ट में कुछ देने का विचार किया।


कोणीय 2 में :

(keyup.enter)="doSomething()"

यदि आप बटन में कुछ दृश्य प्रतिक्रिया नहीं चाहते हैं, तो यह बटन का संदर्भ न देने के लिए एक अच्छा डिज़ाइन है बल्कि सीधे नियंत्रक को बुलाता है।

साथ ही, आईडी की आवश्यकता नहीं है - दृश्य और मॉडल के बीच अलग होने का एक और एनजी 2 तरीका।


कोशिश करो:

<input type="text" id="txtSearch"/>
<input type="button" id="btnSearch" Value="Search"/>

<script>             
   window.onload = function() {
     document.getElementById('txtSearch').onkeypress = function searchKeyPress(event) {
        if (event.keyCode == 13) {
            document.getElementById('btnSearch').click();
        }
    };

    document.getElementById('btnSearch').onclick =doSomething;
}
</script>

document.onkeypress = function (e) {
 e = e || window.event;
 var charCode = (typeof e.which == "number") ? e.which : e.keyCode;
 if (charCode == 13) {

        // Do something here
        printResult();
    }
};

मेरे दो सेंट है। मैं विंडोज 8 के लिए एक ऐप पर काम कर रहा हूं और जब मैं एंटर बटन दबाता हूं तो बटन को एक क्लिक इवेंट पंजीकृत करना चाहता हूं। मैं जेएस में यह कर रहा हूँ। मैंने कुछ सुझावों की कोशिश की, लेकिन मुद्दों में थे। यह ठीक काम करता है।


event.returnValue = false

घटना को संभालने या फ़ंक्शन में अपने ईवेंट हैंडलर कॉल करते समय इसका उपयोग करें।

यह कम से कम इंटरनेट एक्सप्लोरर और ओपेरा में काम करता है।





onkeypress