জ্যাকোরিতে এমন কোনও ইভেন্ট রয়েছে যা কেবলমাত্র যদি ব্যবহারকারী কোনও পাঠ্যবক্সে প্রবেশ বোতামটি চাপায় তবেই তা ট্রিগার হয়েছিল? বা এর সাথে যুক্ত হতে পারে এমন কোনও প্লাগইন? যদি তা না হয় তবে আমি কীভাবে একটি দ্রুত প্লাগইন লিখব যা এটি করবে?
জ্যাকোরিতে এমন কোনও ইভেন্ট রয়েছে যা কেবলমাত্র যদি ব্যবহারকারী কোনও পাঠ্যবক্সে প্রবেশ বোতামটি চাপায় তবেই তা ট্রিগার হয়েছিল? বা এর সাথে যুক্ত হতে পারে এমন কোনও প্লাগইন? যদি তা না হয় তবে আমি কীভাবে একটি দ্রুত প্লাগইন লিখব যা এটি করবে?
উত্তর:
আপনি নিজের কাস্টম ইভেন্টটি ওয়্যার আপ করতে পারেন
$('textarea').bind("enterKey",function(e){
//do stuff here
});
$('textarea').keyup(function(e){
if(e.keyCode == 13)
{
$(this).trigger("enterKey");
}
});
e.keyCodeকিছু কীগুলির জন্য আলাদা আলাদা ব্রাউজারের আলাদা আলাদা ব্যবহার থাকে e.which, এটি আপনাকে গ্যারান্টি দিয়ে দেয় যে আপনি প্রতিটি ব্রাউজারে একই বোতামটি হ্যান্ডেল করবেন
$('#textbox').on('keypress', function (e) {
if(e.which === 13){
//Disable textbox to prevent multiple submit
$(this).attr("disabled", "disabled");
//Do Stuff, submit, etc..
//Enable the textbox again if needed.
$(this).removeAttr("disabled");
}
});
আপনার জন্য এখানে একটি প্লাগইন রয়েছে: (ফ্রেড: http://jsfiddle.net/maniator/CjrJ7/ )
$.fn.pressEnter = function(fn) {
return this.each(function() {
$(this).bind('enterPress', fn);
$(this).keyup(function(e){
if(e.keyCode == 13)
{
$(this).trigger("enterPress");
}
})
});
};
//use it:
$('textarea').pressEnter(function(){alert('here')})
$প্লাগইনটির জন্য ভেরিয়েবল ব্যবহার করা ভাল ধারণা নয় কারণ এটি দ্বন্দ্ব সৃষ্টি করতে পারে।
$("#myInput").bind('click, onEnter', myCallback);এবং এটি অন্য কিছুর প্রয়োজন ছাড়াই কাজ করবে?
এটি করতে একটি jquery প্লাগইন heres
(function($) {
$.fn.onEnter = function(func) {
this.bind('keypress', function(e) {
if (e.keyCode == 13) func.apply(this, [e]);
});
return this;
};
})(jQuery);
এটি ব্যবহার করতে কোডটি অন্তর্ভুক্ত করুন এবং এটি সেট আপ করুন:
$( function () {
console.log($("input"));
$("input").onEnter( function() {
$(this).val("Enter key pressed");
});
});
func.apply(this), কলব্যাক ফাংশনের অভ্যন্তরে আপনি thisইভেন্টটিকে ট্রিগারযুক্ত উপাদানটিতে অ্যাক্সেস করতে স্বাভাবিক হিসাবে ব্যবহার করতে পারেন ।
e.preventDefault(); e.stopPropagation();ভিতরে যোগ করুন if (e.keyCode)।
এটি হওয়া উচিত ভাল লক্ষনীয় যে ব্যবহার live()jQuery মধ্যে হয়েছে অবচিত সংস্করণ থেকে 1.7এবং হয়েছে মুছে jQuery মধ্যে 1.9। পরিবর্তে, এর ব্যবহার on()বাঞ্ছনীয়।
বাঁধাইয়ের জন্য আমি নিম্নলিখিত পদ্ধতিটি অত্যন্ত পরামর্শ দেব, কারণ এটি নিম্নলিখিত সম্ভাব্য চ্যালেঞ্জগুলি সমাধান করে:
document.bodyএবং দ্বিতীয় নির্বাচককে দ্বিতীয় যুক্তি হিসাবে পাস করার মাধ্যমে on(), পুনরায় বাইন্ডিং বা ডাবল-বাইন্ডিং ইভেন্টগুলি মোকাবেলা করার প্রয়োজন ছাড়াই উপাদানগুলি ডিওএম থেকে সংযুক্ত, বিচ্ছিন্ন, যোগ বা সরিয়ে ফেলা যায়। কারণ ইভেন্টটি সরাসরি document.bodyনা হয়ে যুক্ত থাকে $selector, যার অর্থ $selectorআবার যুক্ত করা, অপসারণ এবং যোগ করা যেতে পারে এবং ইভেন্টটি কখনই এতে আবদ্ধ হবে না।off()আগে কল করে on(), এই স্ক্রিপ্টটি দুর্ঘটনাক্রমে ডাবল বাইন্ডিং ইভেন্টগুলি নিয়ে চিন্তা না করেই পৃষ্ঠার মূল অংশের মধ্যে বা একটি এজেএক্স কলের শরীরে বাঁচতে পারে।$(function() {...}), এই স্ক্রিপ্টটি আবার পৃষ্ঠার প্রধান অংশ দ্বারা বা একটি এজেএক্স কলের শুরুর মধ্যে লোড করা যেতে পারে। $(document).ready()AJAX অনুরোধের জন্য বরখাস্ত হয় না, যখন $(function() {...})না।এখানে একটি উদাহরণ:
<!DOCTYPE html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var $selector = $('textarea');
// Prevent double-binding
// (only a potential issue if script is loaded through AJAX)
$(document.body).off('keyup', $selector);
// Bind to keyup events on the $selector.
$(document.body).on('keyup', $selector, function(event) {
if(event.keyCode == 13) { // 13 = Enter Key
alert('enter key pressed.');
}
});
});
</script>
</head>
<body>
</body>
</html>যদি আপনার ইনপুট হয় search, আপনি on 'search'ইভেন্টটিও ব্যবহার করতে পারেন । উদাহরণ
<input type="search" placeholder="Search" id="searchTextBox">।
$("#searchPostTextBox").on('search', function () {
alert("search value: "+$(this).val());
});এইচটিএমএল কোড: -
<input type="text" name="txt1" id="txt1" onkeypress="return AddKeyPress(event);" />
<input type="button" id="btnclick">জাভা স্ক্রিপ্ট কোড
function AddKeyPress(e) {
// look for window.event in case event isn't passed in
e = e || window.event;
if (e.keyCode == 13) {
document.getElementById('btnEmail').click();
return false;
}
return true;
}আপনার ফর্মটিতে ডিফল্ট জমা বোতাম নেই
আরেকটি সূক্ষ্ম প্রকরণ। আমি ক্ষমতাগুলির সামান্য বিভাজনের জন্য গিয়েছিলাম, তাই আমার কাছে প্রবেশ কীটি ধরা সক্ষম করার জন্য একটি প্লাগইন রয়েছে, তবে আমি কেবল ইভেন্টগুলিতে সাধারণত বাঁধাই করি:
(function($) { $.fn.catchEnter = function(sel) {
return this.each(function() {
$(this).on('keyup',sel,function(e){
if(e.keyCode == 13)
$(this).trigger("enterkey");
})
});
};
})(jQuery);এবং তারপরে ব্যবহারে:
$('.input[type="text"]').catchEnter().on('enterkey',function(ev) { });এই প্রকরণটি আপনাকে ইভেন্ট প্রতিনিধি ব্যবহারের অনুমতি দেয় (আপনি এখনও তৈরি করেননি এমন উপাদানগুলির সাথে বাঁধাই করতে)।
$('body').catchEnter('.onelineInput').on('enterkey',function(ev) { /*process input */ });আমি keypressপ্রবেশের বোতামটির জন্য ইভেন্টটি ছড়িয়ে দিতে পারি না এবং আমি jQuery ডকগুলি না পড়া পর্যন্ত কিছুক্ষণের জন্য আমার মাথা আঁচড়ান:
" ব্রাউজারটি কীবোর্ড ইনপুট নিবন্ধ করার সময় কিপ্রেস ইভেন্টটি একটি উপাদানে প্রেরণ করা হয় Sh শিফট, ইস্কের মতো সংশোধনকারী এবং অ-মুদ্রণ কীগুলি বাদ দিয়ে এবং কীপ্রেস ইভেন্টগুলি না করে এটি মুছে ফেলা কী-ইভেন্ট ইভেন্টের মতো " " https://api.jquery.com/keypress/ )
এন্টার বোতামটি টিপতে আমাকে keyupবা keydownইভেন্টটি ব্যবহার করতে হয়েছিল ।