একটি ভ্যানিলা জেএস বা jQuery সমাধান কী যা পাঠ্যবাক্সটি ফোকাস পাওয়ার পরে একটি পাঠ্যবাক্সের সমস্ত বিষয়বস্তু নির্বাচন করবে?
একটি ভ্যানিলা জেএস বা jQuery সমাধান কী যা পাঠ্যবাক্সটি ফোকাস পাওয়ার পরে একটি পাঠ্যবাক্সের সমস্ত বিষয়বস্তু নির্বাচন করবে?
উত্তর:
$(document).ready(function() {
$("input:text").focus(function() { $(this).select(); } );
});
<input type="text" onfocus="this.select();" onmouseup="return false;" value="test" />
onmouseup="return false;"
যদি ব্যবহারকারী চান যে টেক্সটবক্সের অভ্যন্তরে ফোকাস করার পরে পাঠ্য স্বাধীনভাবে নির্বাচন করতে এবং সম্পাদনা করতে সক্ষম হতে চান তবে যুক্ত করবেন না । এই কোডের সাহায্যে পাঠ্যটি "সমস্ত নির্বাচন করুন" পরিস্থিতিতে লক হয়ে যাবে এবং ব্যবহারকারী কোনও নতুন পাঠ্য টাইপ না করে বা চারদিকে ঘুরতে তীর কী ব্যবহার না করে ব্যবহারকারী এটিকে সম্পাদনা করতে পারবেন না। সত্যই এটি একটি অত্যন্ত উদ্ভট আচরণের মতো অনুভূত হয় এবং টেক্সটবক্স স্থায়ীভাবে অ সম্পাদনযোগ্য (এবং সেইজন্য অক্ষম) হওয়ার উদ্দেশ্যে তৈরি না করা হলে তা বোঝা যায় না।
onmouseup="return false;"
যখন আপনি প্রথমে ব্যবহারকারী প্রথম ক্লিক বা ট্যাবগুলি নির্বাচন করতে চান তা আপনার প্রয়োজন হয় না । এবং ভ্যানিলা জাভাস্ক্রিপ্টের জন্য +1!
$(document).ready(function() {
$("input[type=text]").focus().select();
});
$(document).ready(function() {
$("input:text")
.focus(function () { $(this).select(); } )
.mouseup(function (e) {e.preventDefault(); });
});
mouseup
ঘটনার ডিফল্ট প্রতিরোধের এক প্রতিক্রিয়া দেয় : "একবার যদি কার্সার মাঠে থাকে, নির্বাচিত পাঠ্যটির ভিতরে কোথাও ক্লিক করে সেখানে কার্সারটি ব্যবহার করে না; ক্লিকগুলি কার্যকরভাবে অক্ষম করা হয়। তবুও, এর জন্য এমন পরিস্থিতিতে যেখানে ফোকাসের উপর পুরো পাঠ্যটি পছন্দ করা বাঞ্ছনীয়, এটি সম্ভবত দু'টি দুষ্কর্মের চেয়ে কম। "
jQuery জাভাস্ক্রিপ্ট নয় যা কিছু ক্ষেত্রে ব্যবহার করা আরও সহজ।
এই উদাহরণটি দেখুন:
<textarea rows="10" cols="50" onclick="this.focus();this.select()">Text is here</textarea>
সূত্র: সিএসএস ট্রিকস , এমডিএন
এটি কেবল একটি ক্রোম / সাফারি সমস্যা নয়, আমি ফায়ারফক্স 18.0.1 এর সাথে বেশ অনুরূপ আচরণ অনুভব করেছি। মজার অংশটি হ'ল এমএসআইইতে এটি ঘটে না! এখানে সমস্যাটি হ'ল প্রথম মাউসআপ ইভেন্ট যা ইনপুট সামগ্রীটি নির্বাচন করতে বাধ্য করে, তাই কেবল প্রথম ঘটনাটি উপেক্ষা করুন।
$(':text').focus(function(){
$(this).one('mouseup', function(event){
event.preventDefault();
}).select();
});
টাইমআউট পদ্ধতির কারণে একটি অদ্ভুত আচরণ ঘটে এবং প্রতিটি মাউসআপ ইভেন্টকে ব্লক করে আপনি ইনপুট উপাদানটিতে ক্লিক করে নির্বাচনটি আর সরাতে পারবেন না।
এইচটিএমএল:
Enter Your Text : <input type="text" id="text-filed" value="test">
জেএস ব্যবহার করে:
var textFiled = document.getElementById("text-filed");
textFiled.addEventListener("focus", function() { this.select(); });
JQuery ব্যবহার:
$("#text-filed").focus(function() { $(this).select(); } );
প্রতিক্রিয়া জেএস ব্যবহার করে:
রেন্ডার ফাংশনের অভ্যন্তরে সংশ্লিষ্ট উপাদানটিতে -
<input
type="text"
value="test"
onFocus={e => e.target.select()}
/>
onFocus={(e) => e.target.select()}
আমার সমাধান একটি সময়সীমা ব্যবহার করা হয়। ঠিক আছে কাজ মনে হচ্ছে
$('input[type=text]').focus(function() {
var _this = this;
setTimeout(function() {
_this.select();
}, 10);
});
এটি আইওএসেও কাজ করবে:
<input type="text" onclick="this.focus(); this.setSelectionRange(0, 9999);" />
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select
আমি জানি ইনলাইন কোডটি খারাপ স্টাইল, তবে আমি এটি একটি .js ফাইলে রাখতে চাইনি। JQuery ছাড়া কাজ!
<input type="text" value="blah blah" onfocus="this.select(); this.selAll=1;" onmouseup="if(this.selAll==0) return true; this.selAll=0; return false;"></input>
এখানে দেওয়া উত্তরগুলি আমাকে একপর্যায়ে সহায়তা করেছে, তবে ক্রোমের উপরে / ডাউন বোতামগুলিতে ক্লিক করার সময় HTML5 নম্বর ইনপুট ক্ষেত্রগুলিতে আমার একটি সমস্যা হয়েছিল।
আপনি যদি কোনও একটি বোতামে ক্লিক করেন এবং মাউসটি বোতামের উপরে রেখে যান তবে নম্বরটি এমনভাবে পরিবর্তন হতে থাকবে যেন আপনি মাউস বোতামটি ধরে রেখেছেন কারণ মাউসআপটি ফেলে দেওয়া হচ্ছে।
মাউসআপ হ্যান্ডলারটি নীচের মতো ট্রিগার হওয়ার সাথে সাথেই এটি সরিয়ে আমি এটি সমাধান করেছি:
$("input:number").focus(function () {
var $elem = $(this);
$elem.select().mouseup(function (e) {
e.preventDefault();
$elem.unbind(e.type);
});
});
আশা করি এটি ভবিষ্যতে লোকদের সহায়তা করবে ...
mouseup
থেকে টেক্সট ইনপুট ক্ষেত্রে শুধুমাত্র এবং number
s। এই সমস্যাটি এ কারণেই আসা উচিত নয়
এটি কাজ করবে, চেষ্টা করে দেখুন -
<input id="textField1" onfocus="this.select()" onmouseup="return false" />
সাফারি / আইই 9 এবং ক্রোমে কাজ করে, যদিও আমি ফায়ারফক্সে পরীক্ষার সুযোগ পাইনি।
কয়েকটি ফাংশন কল অন্তর্ভুক্ত করে আমি জাচের উত্তরটি কিছুটা উন্নত করতে সক্ষম হয়েছি। এই উত্তরের সমস্যাটি হ'ল এটি অনন্যমাসআপ সম্পূর্ণরূপে নিষ্ক্রিয় করে, যার ফলে আপনাকে ফোকাস করার পরে পাঠ্যবক্সে চারপাশে ক্লিক করতে বাধা দেয়।
আমার কোডটি এখানে:
<input type="text" onfocus="this.select()" onMouseUp="javascript:TextBoxMouseUp();" onMouseDown="javascript:TextBoxMouseDown();" />
<script type="text/javascript">
var doMouseUp = true;
function TextBoxMouseDown() {
doMouseUp = this == document.activeElement;
return doMouseUp;
}
function TextBoxMouseUp() {
if (doMouseUp)
{ return true; }
else {
doMouseUp = true;
return false;
}
}
</script>
জাচের উত্তরের তুলনায় এটি সামান্য উন্নতি। এটি আইইতে পুরোপুরি কাজ করে, ক্রোমে মোটেও কাজ করে না এবং ফায়ারফক্সে (আক্ষরিক অর্থে প্রতিটি সময়) বিকল্প সাফল্যের সাথে কাজ করে। এফএফ বা ক্রোমে নির্ভরযোগ্যভাবে কীভাবে কাজ করা যায় সে সম্পর্কে কারও যদি ধারণা থাকে তবে দয়া করে ভাগ করুন।
যাইহোক, আমি অনুভব করেছি যে আমি এটি কিছুটা সুন্দর করতে কী করতে পারছি তা ভাগ করে নিই।
onMouseUp=""
এবং onMouseDown=""
সঠিক ডাব্লু 3 মান নয়। তারা হওয়া উচিত onmouseup=""
এবং onmousedown=""
। অন্যান্য এইচটিএমএল বৈশিষ্ট্যগুলির মতো এগুলিও উটের ক্ষেত্রে নয়, ছোট হাতের অক্ষরে লেখা উচিত।
@ ট্র্যাভিস এবং @ মারির মতো আমি যখন ব্যবহারকারী ক্লিক করেছিলাম তখন আমি স্বতন্ত্র নির্বাচন করতে চেয়েছিলাম, যার অর্থ একটি এর ডিফল্ট আচরণ প্রতিরোধ করা mouseup
ইভেন্টের রোধ করা, তবে ব্যবহারকারীকে আশেপাশে ক্লিক করা থেকে বিরত রাখতে হবে না। আমি যে সমাধানটি নিয়ে এসেছি, যা আইই 11, ক্রোম 45, অপেরা 32 এবং ফায়ারফক্স 29 (এইগুলি বর্তমানে আমি ইনস্টল করা ব্রাউজারগুলি) এ কাজ করে যা মাউস ক্লিকের সাথে জড়িত ইভেন্টগুলির ক্রমের উপর ভিত্তি করে।
আপনি যখন এমন পাঠ্য ইনপুটটিতে ক্লিক করেন যেখানে ফোকাস নেই, আপনি এই ইভেন্টগুলি (অন্যদের মধ্যে) পান:
mousedown
: আপনার ক্লিকের প্রতিক্রিয়া। ডিফল্ট হ্যান্ডলিং উত্থাপনfocus
প্রয়োজনীয় হলে এবং নির্বাচন শুরু সেট করে।focus
: ডিফল্ট হ্যান্ডলিংয়ের অংশ হিসাবে mousedown
।mouseup
: আপনার ক্লিকের সমাপ্তি, যার ডিফল্ট হ্যান্ডলিংটি নির্বাচনের সমাপ্তি সেট করবে।আপনি যখন ইতিমধ্যে ফোকাসযুক্ত কোনও পাঠ্য ইনপুটটিতে ক্লিক করেন, focus
ইভেন্টটি এড়িয়ে যায়। @ ট্রাভিস এবং @ মারি উভয়েই আশ্চর্যরূপে লক্ষ্য করেছেন যে, ঘটনাটি ঘটে mouseup
তবেই ডিফল্ট হ্যান্ডলিংটি প্রতিরোধ করা দরকার focus
। যাইহোক, কোনও " focus
ঘটেনি" ইভেন্ট না থাকায় আমাদের এটি নির্ধারণ করা দরকার যা আমরা mousedown
হ্যান্ডলারের মধ্যে করতে পারি ।
@ মারির সমাধানটিতে jQuery আমদানি করা দরকার, যা আমি এড়াতে চাই। @ ট্র্যাভিসের সমাধান এটি পরিদর্শন করে document.activeElement
। আমি জানি না কেন ঠিক তার সমাধান ব্রাউজারগুলিতে কাজ করে না, তবে পাঠ্যের ইনপুটটিতে ফোকাস রয়েছে কিনা তা ট্র্যাক করার আরও একটি উপায় রয়েছে: কেবল তার focus
এবং blur
ইভেন্টগুলি অনুসরণ করুন ।
এখানে কোডটি আমার পক্ষে কাজ করে:
var blockMouseUp = false;
var customerInputFocused = false;
txtCustomer.onfocus =
function ()
{
try
{
txtCustomer.selectionStart = 0;
txtCustomer.selectionEnd = txtCustomer.value.length;
}
catch (error)
{
txtCustomer.select();
}
customerInputFocused = true;
};
txtCustomer.onblur =
function ()
{
customerInputFocused = false;
};
txtCustomer.onmousedown =
function ()
{
blockMouseUp = !customerInputFocused;
};
txtCustomer.onmouseup =
function ()
{
if (blockMouseUp)
return false;
};
আমি আশা করি এটি কারও উপকারে আসবে। :-)
একটি জাভাস্ক্রিপ্ট বা jQuery সমাধান কী যা টেক্সটবক্সের ফোকাস পাওয়ার পরে একটি পাঠ্যবাক্সের সমস্ত বিষয়বস্তু নির্বাচন করবে ?
আপনাকে কেবল নিম্নলিখিত বৈশিষ্ট্য যুক্ত করতে হবে:
onfocus="this.select()"
উদাহরণ স্বরূপ:
<input type="text" value="sometext" onfocus="this.select()">
(সত্যিই আপনার অন্য কিছু কেন দরকার হবে তা সম্পর্কে আমার কোনও ধারণা নেই))
এটি আমার পক্ষে কাজ করেছে (যেহেতু এটি উত্তর নয় তবে একটি মন্তব্যে পোস্ট করা)
$("#textBox").focus().select();
$('input').focus(function () {
var self = $(this);
setTimeout(function () {
self.select();
}, 1);
});
সম্পাদনা: প্রতি @ ডেভিডজির অনুরোধ অনুযায়ী, আমি বিশদ সরবরাহ করতে পারছি না কারণ এটি কেন কাজ করে তা সম্পর্কে আমি নিশ্চিত নই, তবে আমি বিশ্বাস করি যে ফোকাস ইভেন্টটির প্রচার বা উপরের কিছু ঘটছে বা যা কিছু ঘটে এবং ইনপুট উপাদানটির বিজ্ঞপ্তি পাওয়ার সাথে এর কিছু করার রয়েছে এটি ফোকাস প্রাপ্ত হয়েছে। সময়সীমা নির্ধারণ করা উপাদানটিকে এটি হয়ে গেছে তা উপলব্ধি করার জন্য একটি মুহুর্ত দেয়।
দ্রষ্টব্য: আপনি যদি এএসপি.এনইটি তে প্রোগ্রামিং করে থাকেন তবে স্ক্রিপ্ট ম্যানেজ.আরজিস্টার স্টার্টআপস স্ক্রিপ্ট সি ব্যবহার করে স্ক্রিপ্টটি চালাতে পারেন:
ScriptManager.RegisterStartupScript(txtField, txtField.GetType(), txtField.AccessKey, "$('#MainContent_txtField').focus(function() { $(this).select(); });", true );
অথবা অন্যান্য উত্তরে প্রস্তাবিত HTML পৃষ্ঠায় স্ক্রিপ্টটি কেবল টাইপ করুন।
আমি পার্টিতে একদম দেরি করছি, তবে এটি মাউসআপ (এবং জিকুয়েরি ছাড়াই) জড়িত না করে আইই 11, ক্রোম, ফায়ারফক্সে পুরোপুরি কাজ করে।
inputElement.addEventListener("focus", function (e) {
var target = e.currentTarget;
if (target) {
target.select();
target.addEventListener("mouseup", function _tempoMouseUp(event) {
event.preventDefault();
target.removeEventListener("mouseup", _tempoMouseUp);
});
}
});
focus
এই ক্ষেত্রটিতে ট্যাব দিয়ে থাকেন তবে আপনি একাধিক মাউসআপ ইভেন্ট শ্রোতাদের সংযুক্ত হতে দেখবেন ...
আমার সমাধানটি পরবর্তী:
var mouseUp;
$(document).ready(function() {
$(inputSelector).focus(function() {
this.select();
})
.mousedown(function () {
if ($(this).is(":focus")) {
mouseUp = true;
}
else {
mouseUp = false;
}
})
.mouseup(function () {
return mouseUp;
});
});
সুতরাং মাউসআপটি সাধারণত কাজ করবে তবে ইনপুট দ্বারা ফোকাস পাওয়ার পরে বাছাই করবে না