একটি পাঠ্য বাক্সে এন্টার কীতে জাভাস্ক্রিপ্ট সহ একটি বোতাম ক্লিক ট্রিগার করুন


1292

আমার কাছে একটি পাঠ্য ইনপুট এবং একটি বোতাম রয়েছে (নীচে দেখুন)। আমি কিভাবে জাভাস্ক্রিপ্ট ব্যবহার করতে পারেন বোতাম এর ক্লিকের ঘটনা আরম্ভ যখন Enterচাবি টেক্সট বক্সে ভিতরে চাপা হয়?

আমার বর্তমান পৃষ্ঠায় ইতিমধ্যে একটি পৃথক সাবমিট বাটন রয়েছে, তাই আমি বোতামটি কেবল জমা বোতামটি তৈরি করতে পারি না। এবং, আমি কেবল চাই যে Enterএই নির্দিষ্ট বোতামটি ক্লিক করার জন্য কীটি যদি এই কোনও পাঠ্য বাক্সের মধ্যে থেকে টিপানো হয়, অন্য কিছুই না।

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

1
আমার মতো দালালদের জন্য গুরুত্বপূর্ণ দ্রষ্টব্য: এই প্রশ্নের মূল অংশটি হ'ল যদি ইতিমধ্যে পৃষ্ঠায় কোনও ফর্ম থাকে তবে ইতিমধ্যে জমা দেওয়া বোতামটি রয়েছে। JQuery উত্তর ক্রস ব্রাউজার সামঞ্জস্যপূর্ণ এবং একটি ভাল সমাধান।
জোশুয়া ডান্স

2
@ জোশুয়াড্যান্স, ইতিমধ্যে একটি ফর্ম / জমা দেওয়া কোনও সমস্যা নয়। একটি পৃষ্ঠায় অনেকগুলি ফর্ম থাকতে পারে (তবে নেস্টেড নয়), প্রত্যেকটির নিজস্ব জমা রয়েছে। প্রতিটি ফর্মের প্রতিটি ক্ষেত্র কেবলমাত্র সেই ফর্মটির জমা দেওয়ার ট্রিগার করবে। যেমন এই উত্তর দ্বারা বলা হয়েছে ।
ফ্রেডেরিক

উত্তর:


1426

JQuery এ, নিম্নলিখিতগুলি কাজ করবে:

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

$("#pw").keyup(function(event) {
    if (event.keyCode === 13) {
        $("#myButton").click();
    }
});

$("#myButton").click(function() {
  alert("Button code executed.");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Username:<input id="username" type="text"><br>
Password:&nbsp;<input id="pw" type="password"><br>
<button id="myButton">Submit</button>

বা সরল জাভাস্ক্রিপ্টে, নিম্নলিখিতগুলি কাজ করবে:

document.getElementById("id_of_textbox")
    .addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        document.getElementById("id_of_button").click();
    }
});

document.getElementById("pw")
    .addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        document.getElementById("myButton").click();
    }
});

function buttonCode()
{
  alert("Button code executed.");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Username:<input id="username" type="text"><br>
Password:&nbsp;<input id="pw" type="password"><br>
<button id="myButton" onclick="buttonCode()">Submit</button>


12
ইভেন্ট.কি কোড বা ইভেন্ট কোডচার্ডের চেয়ে ইভেন্টের কোয়েরি করা সম্ভবত এটি একটি ভাল অনুশীলন, দেখুন ডেভেলপার.মোজিলা.আর.ইন
উইলিয়াম নিউ

25
keydownkeyupব্যবহার করার চেয়ে ভাল ঘটনা নয় । এছাড়াও, আপনি যদি এসপ নেট ব্যবহার করে থাকেন তবে আপনাকে return falseশেষ পর্যন্ত এসপ নেটটিকে ইভেন্টটিকে বাধা দেওয়া থেকে বিরত রাখতে হবে।
সর্বাধিক

144
ব্যবহারে সমস্যা keydownহ'ল এন্টার চেপে রাখা ঘটনাটিকে বারবার আগুন ধরিয়ে দেবে। আপনি যদি keyupইভেন্টটির সাথে সংযুক্ত হন , চাবিটি প্রকাশিত হওয়ার পরে এটি কেবল আগুনে জ্বলবে।
স্টিভ পাওলো

26
আমি যোগ আপনার কোড tweaked থাকেন event.preventDefault();invoking সামনে click();ফাংশন যখন আমার পাতা একটি ফর্ম আছে এবং আমি সুইচ করেছি keyupসঙ্গে keypressযেমন আমার জন্য শুধুমাত্র কাজ হ্যান্ডলার ছিল, যাইহোক, কোডের ঝরঝরে টুকরা জন্য ধন্যবাদ!
অ্যাড্রিয়ান কে।

7
সত্যি কথা বলতে, এই উত্তর পোস্ট করা হলে jQuery জেএস এর পিছনে বেশ সমার্থক ছিল। তবে এখন আমাদের মধ্যে অনেকেই যারা পুরোপুরি jQuery এড়ান (কারণ আপনি প্রতিক্রিয়া জাতীয় কিছু ব্যবহার করার সময় এটি কেবল কেবি-র অপচয়) যখন আমরা জেএস প্রশ্নের উত্তর অনুসন্ধান করি এবং প্রায়শই প্রথম যে বিষয়টি সামনে আসে আমরা একটি লাইব্রেরি করি যা বিরক্ত হয় নির্ভর করতে চাই না।
অ্যান্ডি

402

তারপরে এটি কোড করুন!

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

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

5
হ্যাঁ আমি প্রায় তা করে ফেলেছি। আমার ধারণা এটি কেবল একটি ব্যক্তিগত পছন্দের জিনিস ... আমি আরও মডুলার পদ্ধতির পছন্দ করি। ;)
কেডননি

9
আপনি কি ফর্মটি জমা বন্ধ করতে হতে পারে যদি: onkeydown = "যদি (event.keyCode == 13) {। document.getElementById ( 'btnSubmit') ক্লিক করুন (); event.returnValue = মিথ্যা; event.cancel সত্য =;}"
গ্যাব্রিয়েল চুং

3
এটি ইনলাইন পদ্ধতিতে অনুরূপ কোড সহ ফাংশন কল করার পরিবর্তে আপনাকে কলটিতে মিথ্যা ফিরতে এবং পোস্টব্যাক এড়াতে দেয় এই কারণে এটি আমার পক্ষে কাজ করেছিল। আমার ক্ষেত্রে "ক্লিক" পদ্ধতিটি একটি __doPostback async কল এবং "প্রত্যাবর্তন মিথ্যা" ছাড়াই কেবল পৃষ্ঠাটি পুনরায় লোড করবে।
ডেভ

3
আমি স্যামের সাথে একমত, এই ইনলাইন জেএস-কোড সহ এই কোডটি নরক হিসাবে কুৎসিত। আপনার সর্বদা HTML এবং জাভাস্ক্রিপ্ট কোডগুলি পৃথক করা উচিত।
Sk8erPeter

9
@ সাম কখনও পুতুলের কাছ থেকে আপনার জ্ঞান পান না । যন্ত্রণা ভয়ের দিকে নিয়ে যায় এবং ভয় হ'ল মন-ঘাতক। ভয় হ'ল সামান্য-মৃত্যু যা সম্পূর্ণ বিলোপ ঘটায়। আমি আমার ভয়ের সম্মুখীন হবো। আমি এটি আমার ও মধ্য দিয়ে যাওয়ার অনুমতি দেব। এবং এটি অতিক্রান্ত হয়ে গেলে আমি তার পথটি দেখার জন্য অভ্যন্তরীণ চোখ ঘুরিয়ে দেব। ভয় কোথায় গেছে সেখানে কিছুই থাকবে না। সম্ভবত ইনলাইন ইভেন্ট হ্যান্ডলারগুলি ব্যতীত। সুতরাং, হ্যাঁ, দয়া করে আপনার ইভেন্ট হ্যান্ডলারগুলি আপনার দর্শন / মার্কআপ থেকে আলাদা করুন, যেমন এই উত্তরটি করে । ; ^)
রাফিন

179

এটি খুঁজে বের করা:

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

22
e = e || window.event; // ইভেন্টটি পাওয়ার সবচেয়ে সংক্ষিপ্ত উপায়
ভিক্টর

2
সেরা প্লেইন জাভাস্ক্রিপ্ট বিকল্প। এইচটিএমএলে একটি বৈশিষ্ট্য হিসাবে জাভাস্ক্রিপ্ট যুক্ত করা স্থান-গ্রাসকারী এবং jQuery কেবল jQuery (সামঞ্জস্যতা নিশ্চিত নয়)। সমাধানের জন্য ধন্যবাদ!
বক্সস্পাহ

এবং যদি আপনি যদি আইএফটির ভিতরে মিথ্যা ফেরান, আপনি কীটি আরও প্রক্রিয়াজাতকরণ থেকে এড়াতে পারবেন: <ইনপুট টাইপ = "পাঠ্য" আইডি = "txtSearch" onkeypress = "অনুসন্ধানকিপ্রেস (ইভেন্ট)"; /> <ইনপুট টাইপ = "বোতাম" আইডি = "বিটিএনসন্ধান" মান = "অনুসন্ধান" অনক্লিক = "ডোজ কিছু ();" /> <script> ফাংশন অনুসন্ধানকিরপ্রেস (ঙ) {// উইন্ডো সন্ধান করুন। ইভেন্টটি যদি ই = ই পাস না হয় তবে || window.event; যদি (e.keyCode == 13) {document.getElementById ('বিটিএনসন্ধান') ক্লিক করুন (); প্রত্যাবর্তন মিথ্যা; সত্য প্রত্যাবর্তন; } </script>
হোসে গমেজ

83

বোতামটিকে একটি উপাদান জমা দিন, তাই এটি স্বয়ংক্রিয় হবে।

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

নোট করুন যে <form>এই কাজটি করতে আপনার ইনপুট ক্ষেত্রগুলি সহ একটি উপাদান প্রয়োজন (ধন্যবাদ সের্গেই ইলিনস্কি)।

স্ট্যান্ডার্ড আচরণটি নতুন করে সংজ্ঞায়িত করা ভাল অনুশীলন নয়, Enterকীটি সর্বদা একটি ফর্মের জমা বোতামটি কল করে।


30
Dudes! তার পুরো প্রশ্নটি পড়ুন। পৃষ্ঠায় ইতিমধ্যে অন্য জমা দেওয়ার বোতামটি রয়েছে, সুতরাং এটি তার পক্ষে কার্যকর হবে না।
স্কাইবন্ডসর

5
মজার সত্য, আমি সম্প্রতি শেয়ারপয়েন্টে এটি করার চেষ্টা করেছি। তবে শেয়ারপয়েন্টের ইতিমধ্যে একটি ফর্ম রয়েছে যা আপনার সমস্ত সামগ্রীকে ঘিরে রেখেছে, এবং কোনও <form>ট্যাগ অন্যথায় উদার এইচটিএমএল পার্সার দ্বারা ছুঁড়ে দেওয়া হয়েছে। তাই আমাকে কীপ্রেস বা বক্ষকে হাইজ্যাক করতে হবে। (বিটিডাব্লু, শেয়ারপয়েন্টে এন্টার টিপুন কোনও কারণে সম্পাদনা মোড প্রবর্তন করে I আমি অনুমান করি যে ফিতাটি একই ফর্মটি ব্যবহার করছে))

1
একটি <button type="submit" onclick="return doSomething(this)">Value</button>কাজ। মধ্যে খেই মিথ্যা returnশব্দ
গাস

77

যেহেতু কেউ এখনও ব্যবহার addEventListenerকরেনি, তাই আমার সংস্করণটি এখানে। উপাদান দেওয়া:

<input type = "text" id = "txt" />
<input type = "button" id = "go" />

আমি নিম্নলিখিত ব্যবহার করবে:

var go = document.getElementById("go");
var txt = document.getElementById("txt");

txt.addEventListener("keypress", function(event) {
    event.preventDefault();
    if (event.keyCode == 13)
        go.click();
});

এটি আপনাকে এইচটিএমএল পরিষ্কার রাখার সময় ইভেন্টের ধরণ এবং ক্রিয়াকে আলাদাভাবে পরিবর্তন করতে দেয়।

নোট এটি করতে সম্ভবত উপযুক্ত তা নিশ্চিত এই একটি বাইরে <form>কারণ যখন আমি টিপে ফর্ম জমা দিয়েছেন এবং পৃষ্ঠাটি পুনরায় লোড লিখুন তাদের মধ্যে এই উপাদান ঘিরা। আমাকে আবিষ্কার করার জন্য কয়েকটি ব্লিঙ্ক নিয়েছিল।

সংযোজন : @ আরফিনের একটি মন্তব্যে ধন্যবাদ, আমি অনুপস্থিত ইভেন্ট হ্যান্ডলার যুক্ত করেছি এবং একটি preventDefaultকোডটি (সম্ভবত) একটি ফর্মের অভ্যন্তরে কাজ করার অনুমতি দেওয়ার জন্য যোগ করেছি । (আমি এটি পরীক্ষার দিকে ঘুরে দেখব, যে মুহুর্তে আমি বন্ধনীযুক্ত সামগ্রী সরিয়ে ফেলব))


14
আমি সত্যিই বুঝতে পারি না জেকিউয়েরির উত্তরটির আরও বেশি অগ্রগতি কেন রয়েছে। আমি ওয়েব উন্নয়নশীল সম্প্রদায়ের পক্ষে কাঁদছি।
ডেভিড

1
আপনি যা হারিয়েছেন তা হ'ল আপনার কীপ্রেস হ্যান্ডলারের একটি যুক্তি এবং e.preventDefault()এটি ফর্মগুলির সাথে কাজ করার জন্য। দেখুন আমার (নতুন) উত্তর
ruffin

5
যদি না আপনি আপনার ব্যবহারকারীদের মনস্থ করা না আসলে কোনো ডেটা প্রবেশ করতে, আপনি কি সত্যিই ভালো কিছু করা উচিৎif (event.keyCode == 13) { event.preventDefault(); go.click();}
unsynchronized

1
এই ছোট্ট জিনিসের জন্য jQuery ব্যবহার করা নিশ্চিত অকেজো। এটি সিএসপি দিয়ে খুব সহজেই কাজ করে এবং লোড করতে কম সময় নেয়। পারলে এটি ব্যবহার করুন।
আভামান্ডার

59

সরল জাভাস্ক্রিপ্টে,

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 এ দেওয়া হয়েছে, তাই আমি সরল জাভাস্ক্রিপ্টেও কিছু দেওয়ার কথা ভেবেছিলাম।


20
document.layers? আপনি কি এখনও নেটস্কেপকে সমর্থন করছেন? !!
ভিক্টর

6
না আপনাকে নেটস্কেপ সমর্থন করার দরকার নেই। blog.netscape.com/2007/12/28/…
কিংডাঙ্গো

7
নেটস্কেপ ডট কম এমনকি অস্তিত্ব নেই (এটি aol.com এ পুনঃনির্দেশ করে) এবং এখনও এখনও লোকেরা নেসকেপকে সমর্থন করে, আশ্চর্য।
লেয়ার্টস

6
evt.which ? evt.which : evt.keyCodeসমানevt.which || evt.keyCode
ব্যবহারকারী

3
@ লেয়ার্টস আমি বাজি ধরলাম কারণ নেটস্কেপ ব্যবহার করার মতো লোক এখনও আছে ।
সান্টিবাইলার্স

23

আপনি এটির জন্য একটি প্রাথমিক কৌশল ব্যবহার করতে পারেন যা আমি পুরোপুরি উল্লিখিত দেখিনি। আপনি যদি একটি অজ্যাক্স অ্যাকশন করতে চান বা এন্টার এ অন্য কোনও কাজ করতে চান তবে আসলে কোনও ফর্ম জমা দিতে চান না তবে আপনি এটি করতে পারেন:

<form onsubmit="Search();" action="javascript:void(0);">
    <input type="text" id="searchCriteria" placeholder="Search Criteria"/>
    <input type="button" onclick="Search();" value="Search" id="searchBtn"/>
</form>

অ্যাকশন নির্ধারণ = "জাভাস্ক্রিপ্ট: অকার্যকর (0);" ডিফল্ট আচরণটি মূলত প্রতিরোধের জন্য এটি একটি শর্টকাট। এক্ষেত্রে একটি পদ্ধতি বলা হয় যে আপনি এন্টার টিপুন বা বোতামটি ক্লিক করুন এবং কিছু ডেটা লোড করার জন্য একটি এজাক্স কল করা হয়েছে।


এটি মোবাইল ডিভাইস সহায়তার জন্য আরও ভাল সমাধান। এটি স্বয়ংক্রিয়ভাবে অ্যান্ড্রয়েড ডিভাইসগুলিতে এবং আপনার আইওএস এ যুক্ত করলে আইওএসটি কীবোর্ডটি আড়াল searchCriteria.blur();করে onsubmit
অ্যারন গিলিয়ন 4:55

এটি কাজ করবে না, কারণ পৃষ্ঠায় ইতিমধ্যে অন্য জমা দেওয়ার বোতামটি রয়েছে।
হোসে গমেজ

@ জোসেগেমেজ, একটি পৃষ্ঠায় দেবের শুভেচ্ছায় অনেকগুলি জমা দেওয়া বোতাম থাকতে পারে, কেবল তাদের সংশ্লিষ্ট ক্ষেত্রগুলি দ্বারা ট্রিগার করা। এটি কেবল প্রতিটি গ্রুপের ক্ষেত্রের / জমা দেওয়ার জন্য স্বতন্ত্র ফর্ম নিতে পারে। একটি পৃষ্ঠা একক ফর্মের মধ্যে সীমাবদ্ধ নয়।
ফ্রেডেরিক

@ ফ্রেডেরিক: প্রশ্নটি থেকে আমি (মিস?) বুঝতে পেরেছিলাম যে অন্য জমা দেওয়ার বোতামটি একই ফর্মের মধ্যে ছিল: "আমার বর্তমান পৃষ্ঠায় ইতিমধ্যে একটি পৃথক সাবমিট বাটন রয়েছে, তাই আমি বোতামটি কেবল একটি সাবমিট বোতামটি তৈরি করতে পারি না" "
হোসে গমেজ

1
এটি কাস্টম ক্রিয়াকলাপগুলিকে এখনও প্রচুর পরিমাণে অভিনব ওভাররাইড কোডের প্রয়োজনীয়তা এড়ানোর অনুমতি দেয় বলে এটি দুর্দান্ত উত্তর।
বিউজর

16

এটি চেষ্টা করুন:

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

15

প্রতিবার এন্টার কী টিপলে একটি অনুসন্ধানকে ট্রিগার করতে এটি ব্যবহার করুন:

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

14
onkeydown="javascript:if (event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {document.getElementById('btnSearch').click();}};"

কিছুটা সাম্প্রতিক প্রকল্পের এটি আমার কাছেই ছিল ... আমি এটি নেট এ পেয়েছি, এবং সরল পুরাতন জাভাস্ক্রিপ্টে এর চেয়ে ভাল উপায় আছে কিনা তা আমার কোনও ধারণা নেই।



13

যদিও, আমি নিশ্চিত যে ফর্মের একটি ক্ষেত্র এবং একটি জমা বোতাম যতক্ষণ থাকবে ততক্ষণ পৃষ্ঠায় অন্য কোনও ফর্ম থাকা সত্ত্বেও এন্টার চাপলে ফর্মটি জমা দেওয়া উচিত।

তারপরে আপনি js এর সাথে ফর্মটি অন-সাবমিট করতে পারবেন এবং যা যা যা যাচাই বা কলব্যাক চান তা করতে পারেন।


13

কেউ এইচটিএমএল attibute "অ্যাক্সেসকি" খেয়াল করেনি যা কিছুক্ষণ থেকে পাওয়া যায়।

এটি কীবোর্ড শর্টকাট স্টফগুলির কোনও জাভাস্ক্রিপ্ট উপায় নয়।

accesskey_browsers

অ্যাক্সেসকি এমডিএন-তে শর্টকাটগুলি বৈশিষ্ট্যযুক্ত

এইভাবে ব্যবহার করতে ইচ্ছুক। এইচটিএমএল গুণাবলী নিজেই যথেষ্ট, ব্রাউজার এবং ওএসের উপর নির্ভর করে আমরা স্থানধারক বা অন্য সূচকটি পরিবর্তন করতে পারি। স্ক্রিপ্টটি একটি ধারণা দেওয়ার জন্য একটি অনির্ধারিত স্ক্র্যাচ পদ্ধতির। আপনি অতি ক্ষুদ্র মত একটি ব্রাউজার গ্রন্থাগার আবিষ্কারক ব্যবহার করতে পারেন Bowser

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


1
অ্যাক্সেস দুটি আছে s
কায়সার

2
কী এর বিশেষ
ক্ষেত্র

12

সমস্ত YUI প্রেমীদের জন্য এটি এখানে একটি সমাধান :

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

এই বিশেষ ক্ষেত্রে বোতামের কার্যকারিতা দিয়ে ইনজেকশন করা DOM অবজেক্টগুলিকে ট্রিগার করার জন্য YUI ব্যবহার করে আমার আরও ভাল ফলাফল হয়েছে - তবে এটি অন্য গল্প ...


12

ইন Angular2 :

(keyup.enter)="doSomething()"

আপনি যদি বোতামটিতে কিছু ভিজ্যুয়াল প্রতিক্রিয়া না চান তবে বোতামটি উল্লেখ না করে সরাসরি কন্ট্রোলারকে অনুরোধ করা ভাল ডিজাইন।

এছাড়াও, আইডিটির প্রয়োজন নেই - ভিউ এবং মডেলের মধ্যে পৃথক হওয়ার জন্য আরেকটি এনজি 2 উপায়।


1
: এখানে keyup অপশন আরো তথ্য সম্পর্কে একটি প্রশ্ন আছে stackoverflow.com/q/32155887/435605
AlikElzin-kilaka

10

এই ক্ষেত্রে আপনি পোস্টিং থেকে সার্ভারে প্রবেশ বোতামটিও ডাইবেল করতে এবং জেএস স্ক্রিপ্টটি কার্যকর করতে চান।

<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();" />

9

এই বিনিময়ের প্রচেষ্টাটি নিকটে, তবে ব্রাউজারের সাথে সামনের দিকে (সাফারি 4.0.০.৫ এবং ফায়ারফক্স 3...3.৩ এ) এর প্রতি শ্রদ্ধা প্রদর্শন করে, সুতরাং শেষ পর্যন্ত, আমি এটির প্রস্তাব দেব না।

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

এটি উল্লেখ করা উচিত যে এটি ফোকাসগুলিতে ট্রিগার করে।
ফ্লুরসেন্টগ্রীন 5

8
event.returnValue = false

ইভেন্টটি পরিচালনা করার সময় বা ফাংশনে আপনার ইভেন্ট হ্যান্ডলার কল করার সময় এটি ব্যবহার করুন।

এটি অন্তত ইন্টারনেট এক্সপ্লোরার এবং অপেরাতে কাজ করে।


8

Jquery মোবাইলের জন্য আমাকে করতে হয়েছিল

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

2
.livejQuery 1.7 এ অবমূল্যায়িত হয়েছে। এটি এখনও jQuery মোবাইল ঠিক আছে হিসাবে বিবেচনা করা হয়?
বার্মার

8

একটি সম্পূর্ণ সমতল জাভাস্ক্রিপ্ট সমাধান সুরাহা যোগ করার জন্য ফর্ম জমা দিয়ে @ icedwater এর ইস্যু , এখানে সম্পূর্ণ সমাধান এর সঙ্গেform

দ্রষ্টব্য: এটি IE9 + সহ "আধুনিক ব্রাউজারগুলি" এর জন্য। আইই 8 সংস্করণটি আরও জটিল নয়, এবং এটি এখানে শিখতে পারে ।


উচ্চারণ: https://jsfiddle.net/rufwork/gm6h25th/1/

এইচটিএমএল

<body>
    <form>
        <input type="text" id="txt" />
        <input type="button" id="go" value="Click Me!" />
        <div id="outige"></div>
    </form>
</body>

জাভাস্ক্রিপ্ট

// The document.addEventListener replicates $(document).ready() for
// modern browsers (including IE9+), and is slightly more robust than `onload`.
// More here: https://stackoverflow.com/a/21814964/1028230
document.addEventListener("DOMContentLoaded", function() {
    var go = document.getElementById("go"),
        txt = document.getElementById("txt"),
        outige = document.getElementById("outige");

    // Note that jQuery handles "empty" selections "for free".
    // Since we're plain JavaScripting it, we need to make sure this DOM exists first.
    if (txt && go)    {
        txt.addEventListener("keypress", function (e) {
            if (event.keyCode === 13)   {
                go.click();
                e.preventDefault(); // <<< Most important missing piece from icedwater
            }
        });

        go.addEventListener("click", function () {
            if (outige) {
                outige.innerHTML += "Clicked!<br />";
            }
        });
    }
});

1
কোনও ব্যাখ্যা ছাড়াই ডাউনভোটগুলি আপনার উদ্বেগের সমাধান করতে অসুবিধে করে। যা ঠিক মনে হচ্ছে না তা আমাকে জানিয়ে দিন এবং আমি ফলোআপ করতে পেরে খুশি হব।
ruffin

7

আধুনিক, জাভা স্ক্রিপ্ট অবহিত (ছাড়াই keyCodeবা onkeydown)

<input onkeypress="if(event.key == 'Enter') {console.log('Test')}">

এটি আমার মতে সরল উত্তর যা কাজ করে। আমার ব্যবহারের ক্ষেত্রে, আমি এটিকে ওকেপ্রেস = "ইনপুটকিপ্রেসড (ইভেন্ট)" এ আপগ্রেড করেছি এবং তারপরে ইভেন্টটি পরিচালনা করেছি wh যা নিজেই প্যারামিটারে। উদাহরণস্বরূপ কী প্রবেশ করান ইভেন্টটি ফেরত দেয় wh যাকে 13 হিসাবে বলা হয়
ak93

5
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 এর জন্য একটি অ্যাপে কাজ করছি এবং আমি এন্টার বোতামটি টিপলে বোতামটি একটি ক্লিক ইভেন্ট নিবন্ধিত করতে চাই। আমি জেএস এ করছি। আমি বেশ কয়েকটি পরামর্শ দেওয়ার চেষ্টা করেছি, তবে সমস্যা ছিল। এটি ঠিক কাজ করে।


দস্তাবেজে ইভেন্ট হ্যান্ডলারটি রাখার জন্য ওভারকিল বাছাই করুন। charCodeঅন্য কোথাও যদি আপনার 13 টি থাকে তবে আপনি গুলি চালাচ্ছেন printResult()
রাফিন

5

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();
    }
});

5

যারা ব্রিভিটি এবং আধুনিক জেএস পদ্ধতির পছন্দ করতে পারেন তাদের জন্য।

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

যেখানে ইনপুটটি আপনার ইনপুট উপাদানযুক্ত একটি পরিবর্তনশীল।


0

JQuery এ, আপনি ব্যবহার করতে পারেন event.which==13। আপনার যদি একটি থাকে তবে আপনি formব্যবহার করতে পারেন $('#formid').submit()(সঠিক ফর্ম শ্রোতাদের সাথে উল্লিখিত ফর্মটি জমা দেওয়ার জন্য)।

$('#textfield').keyup(function(event){
   if(event.which==13){
       $('#submit').click();
   }
});
$('#submit').click(function(e){
   if($('#textfield').val().trim().length){
      alert("Submitted!");
   } else {
    alert("Field can not be empty!");
   }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="textfield">
Enter Text:</label>
<input id="textfield" type="text">
<button id="submit">
Submit
</button>


0

আমি ক্লাস যুক্ত করে এই বৈশিষ্ট্যটি অর্জন করতে কাস্টম জাভাস্ক্রিপ্ট তৈরি করেছি

উদাহরণ: <button type="button" class="ctrl-p">Custom Print</button>

এখানে এটি ফ্রেড দেখুন
- বা -
চলমান উদাহরণটি https://stackoverflow.com/a/58010042/6631280 দেখুন

দ্রষ্টব্য: বর্তমান যুক্তিতে আপনার Ctrl+ টিপতে হবেEnter


-4

এটি একটি ছোট জাভাস্ক্রিপ্ট ফাংশনটিও সহায়তা করতে পারে, যা ভাল কাজ করে:

<script type="text/javascript">
function blank(a) { if(a.value == a.defaultValue) a.value = ""; }

function unblank(a) { if(a.value == "") a.value = a.defaultValue; }
</script> 
<input type="text" value="email goes here" onfocus="blank(this)" onblur="unblank(this)" />

আমি জানি এই প্রশ্নটি সমাধান হয়েছে তবে আমি সবেমাত্র এমন একটি কিছু খুঁজে পেয়েছি যা অন্যদের জন্য সহায়ক হতে পারে।


5
প্রশ্নটি একটি পাঠ্যবক্সে প্রবেশ কী দিয়ে একটি বোতাম ক্লিক ট্রিগার করার জন্য ছিল। আপনার সমাধানটি "জলছবি" ধরণের কার্যকারিতার জন্য।
কেডনি
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.