অন কীপ্রেসের সময় কীভাবে ইনপুট পাঠ্য বাক্সের পাঠ্য পাবেন?

Question 1

আমি পাঠ্য বাক্সে ব্যবহারকারীর টাইপ হিসাবে এটি পাওয়ার চেষ্টা করছি ( jsfiddle খেলার মাঠ ):

function edValueKeyPress() {
    var edValue = document.getElementById("edValue");
    var s = edValue.value;

    var lblValue = document.getElementById("lblValue");
    lblValue.innerText = "The text box contains: " + s;

    //var s = $("#edValue").val();
    //$("#lblValue").text(s);    
}

<input id="edValue" type="text" onKeyPress="edValueKeyPress()"><br>
<span id="lblValue">The text box contains: </span>

স্নিপেট প্রসারিত করুন

কোড, ত্রুটি ছাড়া সঞ্চালিত হয় যে ব্যতীত মান এর input textবক্স সময় onKeyPressসবসময় মান সামনে পরিবর্তন:

এখানে চিত্র বর্ণনা লিখুন

প্রশ্ন : আমি কীভাবে একটি পাঠ্য বাক্সের পাঠ্য পেতে পারি onKeyPress?

বোনাস বকবক

এইচটিএমএল ডিওমে "ব্যবহারকারী টাইপ করছেন" সম্পর্কিত তিনটি ইভেন্ট রয়েছে :

onKeyDown
onKeyPress
onKeyUp

ইন উইন্ডোজ , ক্রম WM_Keyবার্তা গুরুত্বপূর্ণ হয়ে ওঠে তখন ব্যবহারকারী একটি কী নিচে ঝুলিতে, এবং কী পুনরাবৃত্তি শুরু:

WM_KEYDOWN('a')- ব্যবহারকারী Aকীটি চেপে রেখেছেন
WM_CHAR('a')- aব্যবহারকারীর কাছ থেকে একটি চরিত্র প্রাপ্ত হয়েছে
WM_CHAR('a')- aব্যবহারকারীর কাছ থেকে একটি চরিত্র প্রাপ্ত হয়েছে
WM_CHAR('a')- aব্যবহারকারীর কাছ থেকে একটি চরিত্র প্রাপ্ত হয়েছে
WM_CHAR('a')- aব্যবহারকারীর কাছ থেকে একটি চরিত্র প্রাপ্ত হয়েছে
WM_CHAR('a')- aব্যবহারকারীর কাছ থেকে একটি চরিত্র প্রাপ্ত হয়েছে
WM_KEYUP('a')- ব্যবহারকারী Aকীটি প্রকাশ করেছে

একটি পাঠ্য নিয়ন্ত্রণে পাঁচটি অক্ষর প্রদর্শিত হবে: aaaaa

গুরুত্বপূর্ণ WM_CHARবার্তাটি হ'ল আপনি বার্তায় সাড়া দিয়েছেন , যা পুনরাবৃত্তি করে। অন্যথায় কোনও কী চাপলে আপনি ইভেন্টগুলি মিস করেন।

ইন এইচটিএমএল জিনিষ কিছুটা ভিন্ন আছেন:

onKeyDown
onKeyPress
onKeyDown
onKeyPress
onKeyDown
onKeyPress
onKeyDown
onKeyPress
onKeyDown
onKeyPress
onKeyUp

এইচটিএমএল একটি KeyDownএবং KeyPressপ্রতিটি কী পুনরাবৃত্তি সরবরাহ করে। এবং KeyUpইভেন্টটি তখনই উত্থাপিত হয় যখন ব্যবহারকারী কীটি প্রকাশ করে।

অ্যাভয়েস নিন

আমি প্রতিক্রিয়া জানাতে পারিonKeyDown বা করতে পারি onKeyPress, তবে উভয়ই input.valueআপডেট হয়ে যাওয়ার আগেই উত্থাপিত হয়
আমি প্রতিক্রিয়া জানাতে পারি না onKeyUp, কারণ পাঠ্য-বাক্সের পাঠ্য পরিবর্তনের ফলে এটি ঘটে না।

প্রশ্ন: আমি কীভাবে একটি পাঠ্য-বাক্সের পাঠ্য পেতে পারি onKeyPress?

বোনাস রিডিং

Question 2

inputইভেন্টটি হ্যান্ডলিং একটি সামঞ্জস্যপূর্ণ সমাধান: এটি সমস্ত সমসাময়িক ব্রাউজারগুলির জন্য সমর্থিত হয় textareaএবং আপনার যখন প্রয়োজন হয় ঠিক ঠিক তখন inputএটি জ্বলতে থাকে:

function edValueKeyPress() {
    var edValue = document.getElementById("edValue");
    var s = edValue.value;

    var lblValue = document.getElementById("lblValue");
    lblValue.innerText = "The text box contains: " + s;
}

<input id="edValue" type="text" onInput="edValueKeyPress()"><br>
<span id="lblValue">The text box contains: </span>

স্নিপেট প্রসারিত করুন

যদিও আমি এটি আবার লিখতে চাই:

function showCurrentValue(event)
{
    const value = event.target.value;
    document.getElementById("lblValue").innerText = value;
}

<input id="edValue" type="text" onInput="showCurrentValue(event)"><br>
The text box contains: <span id="lblValue"></span>

স্নিপেট প্রসারিত করুন

Question 3

সহজবোধ্য রাখো. উভয় onKeyPress()এবং onKeyUp():

<input id="edValue" type="text" onKeyPress="edValueKeyPress()" onKeyUp="edValueKeyPress()">

এটি সর্বাধিক আপডেট হওয়া স্ট্রিং মান (কী আপ করার পরে) পাওয়ার এবং যদি ব্যবহারকারী কোনও কী ধরে রাখে তবে আপডেট হয় care

জেএসফিডাল: http://jsfiddle.net/VDd6C/8/

Question 4

অনকিপ্রেস চলাকালীন ইনপুট পাঠ্য বাক্সের মান হ'ল পরিবর্তনের আগে সর্বদা মান

এটি উদ্দেশ্যমূলক: এটি ইভেন্ট শ্রোতাদের কী-টিপস বাতিল করতে দেয়।

ইভেন্ট শ্রোতারা ইভেন্টটি বাতিল করে দিলে মানটি আপডেট হয় না। ইভেন্টটি বাতিল না হলে মানটি আপডেট করা হয় তবে ইভেন্ট শ্রোতাদের ডাকা হওয়ার পরে ।

ক্ষেত্রের মান আপডেট হওয়ার পরে মানটি পেতে, পরবর্তী ইভেন্ট লুপে চালানোর জন্য একটি ফাংশন নির্ধারণ করুন। এটি করার স্বাভাবিক setTimeoutউপায়টি একটি সময়সীমা সহ কল করা 0:

$('#field').keyup(function() {
    var $field = $(this);

    // this is the value before the keypress
    var beforeVal = $field.val();

    setTimeout(function() {

        // this is the value after the keypress
        var afterVal = $field.val();
    }, 0);
});

এখানে চেষ্টা করুন: http://jsfiddle.net/Q57gY/2/

সম্পাদনা করুন : কিছু ব্রাউজার (যেমন ক্রোম) ব্যাকস্পেসের জন্য কীপ্রেস ইভেন্টগুলি ট্রিগার করে না; কোডটিতে কীপ্রেস কী-আপে পরিবর্তিত হয়েছে।

Question 5

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

function edValueKeyPress()
{
    document.getElementById("lblValue").innerText =""+document.getElementById("edValue").value;
}

এটিই আপনি চান, এবং এটি দ্রুত!

Question 6

<asp:TextBox ID="txtMobile" runat="server" CssClass="form-control" style="width:92%;  margin:0px 5px 0px 5px;" onkeypress="javascript:return isNumberKey(event);" MaxLength="12"></asp:TextBox>

<script>
    function isNumberKey(evt) {
        var charCode = (evt.which) ? evt.which : event.keyCode;
        if (charCode > 31 && (charCode < 48 || charCode > 57)) {
            return false;
        }
        return true;
    }
</script>

Question 7

এখনও অবধি কোনও উত্তরই সম্পূর্ণ সমাধান দেয় না। এখানে কয়েকটি সমস্যা সমাধান করতে হবে:

নেই সব keypresses সম্মুখের গৃহীত হয় keydownএবং keypressহ্যান্ডেলার (যেমন ব্যাকস্পেস এবং ডিলিট কী কিছু ব্রাউজার দ্বারা আর দেখানো হয় না)।
হ্যান্ডলিং keydownকরা ভাল ধারণা নয়। এমন পরিস্থিতি রয়েছে যেখানে কী-ডাউনের ফলে কিপ্রেস হয় না!
setTimeout() গুগল ক্রোম / ব্লিঙ্ক ওয়েব ব্রাউজারের অধীনে স্টাইল সমাধানগুলি বিলম্বিত হবে যতক্ষণ না ব্যবহারকারী টাইপ করা বন্ধ করে দেয়।
মাউস এবং স্পর্শ ইভেন্টগুলি কাটা, অনুলিপি এবং পেস্টের মতো ক্রিয়া করতে ব্যবহৃত হতে পারে। এই ইভেন্টগুলি কীবোর্ড ইভেন্টগুলিকে ট্রিগার করবে না।
ইনপুট পদ্ধতির উপর নির্ভর করে ব্রাউজারটি বিজ্ঞপ্তিটি সরবরাহ করতে পারে না যে ব্যবহারকারী ক্ষেত্র থেকে দূরে নেভিগেট না হওয়া পর্যন্ত উপাদানটি পরিবর্তিত হয়েছে।

আরো সঠিক সমাধান হ্যান্ডেল করা হবে keypress, keyup, input, এবং changeইভেন্ট নেই।

উদাহরণ:

<p><input id="editvalue" type="text"></p>
<p>The text box contains: <span id="labelvalue"></span></p>

<script>
function UpdateDisplay()
{
    var inputelem = document.getElementById("editvalue");
    var s = inputelem.value;

    var labelelem = document.getElementById("labelvalue");
    labelelem.innerText = s;
}

// Initial update.
UpdateDisplay();

// Register event handlers.
var inputelem = document.getElementById("editvalue");
inputelem.addEventListener('keypress', UpdateDisplay);
inputelem.addEventListener('keyup', UpdateDisplay);
inputelem.addEventListener('input', UpdateDisplay);
inputelem.addEventListener('change', UpdateDisplay);
</script>

ফিডল:

http://jsfiddle.net/VDd6C/2175/

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

Question 8

আমি মূলত কী ইভেন্টের সাথে সম্পর্কিত কীটির সাথে ক্ষেত্রের মানটি (যেমন এটি আপডেট হওয়ার আগে) সাথে সম্মতি জানাই। নীচেরগুলিতে সাম্প্রতিক জেএস ব্যবহার করা হয়েছে তাই পুরানো আইই এর সমর্থনের জন্য সামঞ্জস্য করতে হবে।

সাম্প্রতিক জেএস উদাহরণ

document.querySelector('#test').addEventListener('keypress', function(evt) {
    var real_val = this.value + String.fromCharCode(evt.which);
    if (evt.which == 8) real_val = real_val.substr(0, real_val.length - 2);
    alert(real_val);
}, false);

পুরানো আইই উদাহরণগুলির জন্য সমর্থন

//get field
var field = document.getElementById('test');

//bind, somehow
if (window.addEventListener)
    field.addEventListener('keypress', keypress_cb, false);
else
    field.attachEvent('onkeypress', keypress_cb);

//callback
function keypress_cb(evt) {
    evt = evt || window.event;
    var code = evt.which || evt.keyCode,
        real_val = this.value + String.fromCharCode(code);
    if (code == 8) real_val = real_val.substr(0, real_val.length - 2);
}

[সম্পাদনা করুন - এই পদ্ধতিটি, ডিফল্টরূপে, ব্যাক স্পেস, সিটিআরএল + এ এর মতো জিনিসগুলির জন্য টিপুন অক্ষম করে। উপরের কোডটি পূর্বেরদের জন্য উপযুক্ত, তবে পরবর্তীগুলির জন্য অনুমতি দেওয়ার জন্য আরও টিঙ্কিংয়ের প্রয়োজন হবে এবং কয়েকটি অন্যান্য ঘটনা ঘটবে। ইয়ান বয়ডের মন্তব্য নীচে দেখুন]]

Question 9

সহজ ...

আপনার কী প্রেসের ইভেন্ট হ্যান্ডলারটিতে লিখুন

void ValidateKeyPressHandler(object sender, KeyPressEventArgs e)
{
    var tb = sender as TextBox;
    var startPos = tb.SelectionStart;
    var selLen= tb.SelectionLength;

    var afterEditValue = tb.Text.Remove(startPos, selLen)
                .Insert(startPos, e.KeyChar.ToString()); 
    //  ... more here
}

Question 10

সুতরাং প্রতিটি ইভেন্টের সুবিধা এবং অসুবিধা রয়েছে। ইভেন্টগুলি onkeypressএবং onkeydownসর্বশেষ মানটি পুনরুদ্ধার onkeypressকরে না এবং কিছু ব্রাউজারে মুদ্রণযোগ্য অক্ষরের জন্য আগুন দেয় না। onkeyupঘটনা যখন একটি কী একাধিক অক্ষরের জন্য নিচে অনুষ্ঠিত হয় শনাক্ত করতে পারেনি।

এটি কিছুটা হ্যাকি, তবে এমন কিছু করছে

function edValueKeyDown(input) {
    var s = input.value;

    var lblValue = document.getElementById("lblValue");
    lblValue.innerText = "The text box contains: "+s;

    //var s = $("#edValue").val();
    //$("#lblValue").text(s);    
}

<input id="edValue" type="text" onkeydown="setTimeout(edValueKeyDown, 0, this)" />

সমস্ত বিশ্বের সেরা পরিচালনা করে বলে মনে হচ্ছে।

Question 11

ইভেন্ট.কি ব্যবহার করে আমরা এইচটিএমএল ইনপুট পাঠ্য বাক্সে প্রবেশের পূর্বে মানগুলি পেতে পারি। কোডটি এখানে।

function checkText()
{
  console.log("Value Entered which was prevented was - " + event.key);
  
  //Following will prevent displaying value on textbox
  //You need to use your validation functions here and return value true or false.
  return false;
}

<input type="text" placeholder="Enter Value" onkeypress="return checkText()" />

স্নিপেট প্রসারিত করুন

Question 12

আপনার প্রাপ্ত মানটির সাথে ইভেন্টের কোডকোডকে সংযুক্ত করার চেষ্টা করুন। এখানে আমার কোডের একটি নমুনা রয়েছে:

<input type="text" name="price" onkeypress="return (cnum(event,this))" maxlength="10">
<p id="demo"></p>

জেএস:

function cnum(event, str) {
    var a = event.charCode;
    var ab = str.value + String.fromCharCode(a);
    document.getElementById('demo').innerHTML = ab;
}

মানটি abইনপুট ক্ষেত্রে সর্বশেষতম মান পাবে।

Question 13

এটি করার আরও ভাল উপায় আছে। কনক্যাট পদ্ধতিটি ব্যবহার করুন। উদাহরণ

একটি বৈশ্বিক চলক ঘোষণা। এটি কৌণিক 10 এ ভাল কাজ করে, এটি কেবল ভ্যানিলা জাভাস্ক্রিপ্টে দিন। উদাহরণ:

এইচটিএমএল

<input id="edValue" type="text" onKeyPress="edValueKeyPress($event)"><br>
<span id="lblValue">The text box contains: </span>

কোড

emptyString = ''

edValueKeyPress ($event){
   this.emptyString = this.emptyString.concat($event.key);
   console.log(this.emptyString);
}

অন ​​কীপ্রেসের সময় কীভাবে ইনপুট পাঠ্য বাক্সের পাঠ্য পাবেন?

বোনাস বকবক

বোনাস রিডিং

অন কীপ্রেসের সময় কীভাবে ইনপুট পাঠ্য বাক্সের পাঠ্য পাবেন?