পাঠ্য-বাক্সে শেষ নম্বরটি টাইপ করার সময় প্রথম সংখ্যাটি ভিতরে যায়

Question

যখন আমি টাইপ শেষ নম্বর এ, প্রথম সংখ্যা ভিতরে যায় text-box(এটা disappears), এটা এক অতিরিক্ত স্থান যোগ হচ্ছে।

আমি বাহিরের বাইরে ক্লিক করার পরে text-boxএটি শেষ দেখায় যা শেষ চরিত্রটি টাইপ করার সময় আমার প্রয়োজন।

  #number_text {
        padding-left: 9px;
        letter-spacing: 31px;
        border: 0;
        background-image: linear-gradient(to right, #e1e1e1 70%, rgba(255, 255, 255, 0) 0%);
        background-position: left bottom;
        background-size: 38px 1px;
        background-repeat: repeat-x;
        width: 220px;
        box-sizing: border-box;
        outline:none;
    }

<input type="text" id="number_text" maxlength="6"  pattern="\d{6}" value="1234" >

এই সমস্যাগুলি থেকে বেরিয়ে আসতে আমাকে সহায়তা করুন। ধন্যবাদ

Comments

দুঃখিত, তবে আমি বিষয়টি বুঝতে পারি না?

— বিবর্তনবক্স

দেখে মনে হচ্ছে শেষ চরিত্রটির জন্য ক্যারোটটি পরিচালনা করতে আপনার এটি আরও প্রশস্ত করা দরকার।

— স্বাধীনতা-এম

@ ইভলিউশনএক্সবক্স আমাকে এক বা দুই মিনিট সময় নিয়েছিল ... স্নিপেটটি বিষয়টি সুন্দরভাবে প্রদর্শন করে - এটি বড় অক্ষরের ব্যবধান সহ একটি ইনপুট বাক্স। ইনপুটটির শেষে ক্লিক করুন এবং টাইপ করুন - এটি 6 এ থামে, তবে 1(প্রথম অক্ষর) ইনপুটটির বামদিকে হারিয়ে যাবে (ওভারফ্লো লুকিয়ে রেখে স্ক্রোলড)।

— 11:54 এ স্বাধীনতা-এম

একই সমস্যা, কিন্তু কোন উত্তর যে (অন্তত) বর্তমান Chrome এ কাজ করে: stackoverflow.com/questions/8961045/...

— freedomn-M

আমি separate টি পৃথক inputনিয়ন্ত্রণ ব্যবহার করার এবং চরিত্রটি টাইপ / মুছে ফেলা হিসাবে তাদের মধ্যে ক্যারেটটি স্থানান্তরিত করার পরামর্শ দেব । অন্যথায় আপনি সর্বদা ব্রাউজার / ফন্টের আকার / জুম স্তর ইত্যাদির মধ্যে সারিবদ্ধ সমস্যাগুলি নিয়ে যাচ্ছেন

— ররি ম্যাকক্রাসন

Answer 1

অন্য সংখ্যার জন্য স্থান যুক্ত করুন এবং ইনপুটটি ক্লিপ করে ব্যবহার করুন clip-path

#number_text {
  padding-left: 9px;
  letter-spacing: 31px;
  border: 0;
  background: 
    repeating-linear-gradient(to right, #e1e1e1 0 26px, transparent 26px 38px)
    bottom/100% 1px no-repeat;
  width: 260px;
  clip-path:polygon(0 0, calc(100% - 38px) 0, calc(100% - 38px) 100%, 0 100%);
  box-sizing: border-box;
  outline: none;
}

<input type="text" id="number_text" maxlength="6" pattern="\d{6}" value="1234">

বা ব্যাকগ্রাউন্ড-আকার হ্রাস করে ক্লিপ-পাথ ছাড়াই:

#number_text {
  padding-left: 9px;
  letter-spacing: 31px;
  border: 0;
  background: 
    repeating-linear-gradient(to right, #e1e1e1 0 26px, transparent 26px 38px)
    bottom left/calc(100% - 38px) 1px no-repeat;
  width: 260px;
  box-sizing: border-box;
  outline: none;
}

<input type="text" id="number_text" maxlength="6" pattern="\d{6}" value="1234">

Comments

প্রথমটি ঠিকঠাক কাজ করছে, দ্বিতীয় পয়েন্টারে দৃশ্যমান।

— জিগনেশ পঞ্চাল

@ জিগনেশপঞ্চল আমি জানি, আমি দুটি ভিন্ন ধারণা দিয়েছি। হয়তো কেউ কার্সারটি দৃশ্যমান থাকতে চায়

— তেমনী আফিফ

এবং প্রথম সমাধানে ~ ক্লিপ-পাথ all সমস্ত ব্রাউজারে কাজ করবে না।

— জিগনেশ পঞ্চাল

@ জিগনেশপঞ্চল যদি না আপনি মৃত ব্রোজার ব্যবহার করেন না তবে ক্লিপ -থ সমস্ত আধুনিক ব্রাউজার দ্বারা সমর্থিত ( caniuse.com/#feat=css-clip-path )

— তেমনী আফিফ

Answer 2

এই কোড ব্যবহার করুন। এটি খুব সুন্দর কাজ

var container = document.getElementsByClassName("wrap")[0];
    container.onkeyup = function(e) {
        var target = e.srcElement;
        var maxLength = parseInt(target.attributes["maxlength"].value, 6);
        var myLength = target.value.length;
        if (myLength >= maxLength) {
            var next = target;
            while (next = next.nextElementSibling) {
                if (next == null)
                    break;
                if (next.tagName.toLowerCase() == "input") {
                    next.focus();
                    break;
                }
            }
        }
     else if (myLength <= maxLength)
      {
        prev=target.previousElementSibling;
         while (prev = prev) {
            if (prev == null)
                break;
            if (prev.tagName.toLowerCase() == "input") {
                prev.focus();
                break;
            }
        }
      }

    }

.wrap input {
            border-top: 0;
            border-left: 0;
            border-right: 0;
            border-bottom: 1px solid #000;
            width: 3%;
            display: inline-block;
            outline: 0;
            text-align: center;
        }

<div class="wrap">
        <input type="text" maxlength="1" />
        <input type="text" maxlength="1" />
        <input type="text" maxlength="1" />
        <input type="text" maxlength="1" />
        <input type="text" maxlength="1" />
        <input type="text" maxlength="1" />
    </div>

Comments

এই জাতীয় একটি ভাল সমাধানের জন্য ধন্যবাদ তবে সংখ্যা প্রবেশের পরে নম্বর সরাতে ব্যাকস্পেস ব্যবহার করার সময় সমস্যা হয়। এই সমস্যাটি একক ইনপুট পাঠ্যে ঘটবে না।

— জিগনেশ পঞ্চাল

এই কোডটি অন্য কোনও অংশে যুক্ত করুন else if (myLength <= maxLength) { prev=target.previousElementSibling; while (prev = prev) { if (prev == null) break; if (prev.tagName.toLowerCase() == "input") { prev.focus(); break; } } }

— শ্রীরাজ_এমএস

@ জিগনেশপঞ্চালমজ আপনার সমস্যাটি সমাধান হলে আমার উত্তরটি সঠিক করুন make

— রমিজ বুখারি

যদিও এটি প্লেসোল্ডার ইস্যুটি ঠিক করে ফেলেছে, এই সমাধানটিকে ব্যবহারযোগ্য করে তোলার জন্য যথেষ্ট বেশি কাজ প্রয়োজন । উদাহরণস্বরূপ 3 য় ইনপুট ক্লিক করুন এবং টাইপ করুন - 3 য় যায় (আপনি যা চান তা হতে পারে) - তারপরে 2 য় ক্লিক করুন এবং একটি পৃথক সংখ্যা দু'বার টাইপ করুন - 2 য় যায় কিন্তু 3 য় ইনপুট উপেক্ষা করে যায়। সুতরাং বাম-কার্সার ফিরে - কার্সার উপেক্ষা করা হবে (বা আরও নির্দিষ্টভাবে উল্টানো হয়েছে)। সম্ভবত এটি ঠিক আছে, ঠিক তেমন সুন্দর মনে হয় না feel

— স্বাধীনতা-এম

parseInt(target.attributes["maxlength"].value, 6);"6" একটি ডিফল্ট নয়, এটা বেস int- এ রূপান্তর করতে এর

— freedomn-M

Answer 3

এই স্ক্রিপ্টটি ইনপুট-ফিল্ডকে প্রশমিত করার চেষ্টা করুন:

<script>
  var oInput = document.getElementById('number_text');
  oInput.onkeypress = function(ev) {
    setTimeout(function() {
        if( oInput.value.length > 5 ) {
            oInput.setSelectionRange(0,0);
            oInput.blur();
        }
    }, 0);
  }
</script>

এটি একটি আপনার ইনপুট-কার্সারটিকে 6th ষ্ঠ অক্ষর প্রবেশ করার পরে ইনপুটটির শুরুতে বাধ্য করে। আমি মাঠে একটি অস্পষ্টতা () যুক্ত করেছি যাতে কার্সার-জাম্প শুরুতে স্থির হয় না stick

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

Comments

আপনি যদি অনকিআপ ইভেন্টটি ব্যবহার করেন তবে আপনি সেটটাইমআউট থেকে মুক্তি পেতে পারেন।

— জোনাস এবারল

কী "আপ" কী-তে আগুন জ্বলে উঠলে কী-আপ জ্বলে উঠবে

— জুরা হার্বার

Answer 4

আপনি ইনপুট বাক্সে জেএস অনকিআপের অস্পষ্ট () ইভেন্ট যুক্ত করে এটি মোকাবেলা করতে পারেন:

myFunction=()=>{
if(document.getElementById("number_text").value.length===6)
document.getElementById("number_text").blur();
}

 #number_text {
        padding-left: 9px;
        letter-spacing: 31px;
        border: 0;
        background-image: linear-gradient(to right, #e1e1e1 70%, rgba(255, 255, 255, 0) 0%);
        background-position: left bottom;
        background-size: 38px 1px;
        background-repeat: repeat-x;
        width: 220px;
        box-sizing: border-box;
        outline:none;
        overflow-y:hidden;
        overflow-x:hidden;
    }

<input type="text" id="number_text" maxlength="6"  pattern="\d{6}" value="1234" onkeyup="myFunction()" >
<br/>

Comments

যখন শেষ সংখ্যাটি প্রবেশ করান এটি কিছু সময়ের জন্য সমস্ত সংখ্যা সরিয়ে দেয়।

— জিগনেশ পঞ্চাল

Answer 5

দয়া করে নীচে সিএসএসে পরিবর্তন করুন (এটি কাজ করবে)

padding-left: 14px;

প্রতি

padding-left: 5px;

Comments

তবে এটি সংখ্যার সীমানার নীচে ডিজাইনে সমস্যা করে। এবং সংখ্যাটি সীমান্তের কেন্দ্রবিন্দু নয়।

— জিগনেশ পঞ্চাল 13

Answer 6

তাই আমি ক্লিপিং মাস্ক ব্যবহার সম্পর্কে তেমনী আফিফের উত্তরটি পছন্দ করি। মনে হয় এটা দুর্দান্ত। আমি আরেকটি সমাধান প্রস্তাব করতে চেয়েছিলাম (একটু কম মার্জিত)। আমি এই সমস্যাটি পরীক্ষা করতে ফায়ারফক্স ব্যবহার করেছি এবং পাঠ্য অঞ্চলের বাইরে ক্লিক করা (ফোকাস হারাতে) প্রথম সংখ্যার পুনরায় উপস্থিত হয় না বা স্ট্রিংটি পাঠ্য ইনপুটটিতে স্বাভাবিক অবস্থায় ফিরে আসে না।

আমি বিশ্বাস করি যে সমস্যাটি হ'ল চিঠি স্পেসিং CSS বৈশিষ্ট্যটি আপনি সেট করেছেন: letter-spacing: 31px;এবং আমি বিশ্বাস করি যে এটি বেশিরভাগ ব্রাউজারগুলির "ঝলকানি" ক্যারেটের জন্য প্রযোজ্য। ক্রোম ব্যবহার করে মনে হচ্ছে এটি ফোকাস হারিয়ে ফেললে এটি মুছে ফেলা হবে, অন্যদিকে ফায়ারফক্স ফোকাস হারানোর পরেও এটি ধরে রেখেছে।

প্রথম সমাধানটি হ'ল ইনপুটটিকে ফোকাসটি হারাতে ম্যানুয়ালি ব্লার () ফাংশনটি ব্যবহার করা উচিত। এটি ক্রোমে কাজ করে (একটি স্ব-কার্যকরকারী অনামিকার কাজ ব্যবহার করে):

<input type="text" id="number_text" maxlength="6" onkeyup="(function()
    {
      var x = document.getElementById('number_text');
      let value = x.value
      if (value.length >= 6){
        x.blur()
        return false
      }
    })();"
 pattern="\d{6}" value="1234" >

বা এমনকি সংখ্যার_পেক্স ইনপুট দ্বারা ডাকা একটি সংজ্ঞায়িত ফাংশন হিসাবে:

<script>
 handleMaxInput = function(){
  var x = document.getElementById('number_text');
  let value = x.value
  if (value.length >= 6){
    x.blur()
    return false
  }
};
</script>

<input ... id='number_text' ... onkeyup="handleMaxInput()" ... >

আপনি ক্রোমে কিছুটা বিলম্ব লক্ষ্য করবেন, কিন্তু ফায়ারফক্সে এ কল করা সমস্যার সমাধান করবে না।

আমরা ফায়ারফক্সে মূলত এই একই আচরণকে বাধ্য করতে পারি। কিছুটা খেলার পরে, আমি অনুভব করেছি যে ক্রোম একটি অস্পষ্ট বর্ণের ফাঁকে ফাঁকে ফাঁকে ফাঁকে রিফ্রেশ করছে / পুনরায় গণনা করছে। আমার খেলার সেশনটি দেখিয়েছে যে আপনি ফায়ারফক্সকে এই মানটিকে প্রোগ্রাম্যালি পুনরায় গণনা করতে বাধ্য করতে পারেন:

1. ইনপুট-এর লেটার-স্পেসিং বৈশিষ্ট্যের ইনলাইন স্টাইলটি একটি ভিন্ন মানের পরিবর্তিত করুন (যেহেতু আমরা অনেক চেষ্টা ছাড়াই প্রোগ্রাম_সংখ্যায় একটি_এসএস ক্লাস সম্পাদনা করতে পারি না, যেমন কোনও নথির শৈলীর অংশে পুরো স্টাইল ট্যাগটি পুনরায় লেখার মতো)।
2. ইনপুট থেকে শ্রেণি নম্বর_পদ্ধতিটি সরান।
   • 1 এবং 2 বিনিময়যোগ্য, আপনার ফায়ারফক্সের কেবলমাত্র সেট করা ইনলাইন স্টাইলে ফ্যালব্যাকের দরকার, ক্লাসের বৈশিষ্ট্যগুলি 'মেমোরিতে' সংরক্ষণ না করে।
3. ইনলাইন-স্টাইলটি সরান এবং নম্বর_টেক্সট সিএসএস ক্লাসটি পুনরায় প্রয়োগ করুন। এটি আমাদের যেমন প্রয়োজন তেমন অক্ষর-বিভাজন পুনরায় গণনা করতে ব্রাউজারকে বাধ্য করবে।

কোডে এটি নীচের জাভাস্ক্রিপ্ট ফাংশনটির মতো দেখাবে:

handleMaxInput = function(){
        var x = document.getElementById('number_text');
        let value = x.value
        if (value.length >= 6){ // if the input is 6 or more characters
              x.classList.remove('number_text') // remove the class
              x.style.letterSpacing = '0px' // reset the spacing
              setTimeout(function() { // set time to let browser refresh updates
                  x.classList.add('number_text') // Re-add class after browser refresh
                  setTimeout(function() { // Remove inline-style after more reculculations
                      x.style.removeProperty('letter-spacing') // Remove inline style to let class styles apply
                      x.blur // optional, will force input field to lose focus. Else comment out to avoid that.
              }, (1)); // waits 1 millisecond
          }, (1)); // waits 1 millisecond
        }
    }

ফায়ারফক্সে ক্রমের মতো একই ফ্লিকার থাকবে এবং সব ঠিকঠাক হবে well

দ্রষ্টব্য : সময়সীমা ফাংশনগুলি হ'ল ব্রাউজারকে রিফ্রেশ করার সময় দেওয়া এবং আমাদের যা প্রয়োজন তা আপডেট করে।

দ্রষ্টব্য : আপনি পাঠ্যবক্সটি ফোকাস হারাতে ফাংশনে .blur () কল করতে পছন্দ করতে পারেন, বা বাদ দিতে পারেন এবং অঙ্কগুলির সাথে ত্রুটি ছাড়াই তারা ইনপুট ক্ষেত্রে থাকবে।

আশা করি এটি আপনার ধারণাগত বোঝার পাশাপাশি সমস্যা সমাধানে সহায়তা করবে। কিছু অন্যান্য ব্যক্তি ভাল সমাধান দিয়েছেন যা পুরো ঝাঁকুনি এড়ায় এবং ফায়ারফক্স এবং ক্রোম উভয় ক্ষেত্রেই কাজ করে!

Answer 7

এটি দেখে মনে হচ্ছে এমন একটি সাধারণ ইউআই সমস্যা রয়েছে যা আমি এর আগে দেখেছি।

আমি বাজি ধরেছি এটি কেবল কিছু প্ল্যাটফর্মেও ব্যর্থ হয় (এটি এই নির্দিষ্ট বাগের প্রকৃতি))

কিছুতে, তবে সমস্ত নয়, প্ল্যাটফর্মগুলিতে ক্যারেটটি নির্দেশ করতে একটি ফাঁককারী অক্ষর ব্যবহার করা হয়।

প্ল্যাটফর্মগুলির কিছুতে, তবে সমস্তটি নয়, এই চরিত্রটি ফাঁকবিহীন নয়, তবে পরের অংশে, শেষের চরিত্রটি নয় over সুতরাং যদি পরবর্তী কোনও অক্ষর না থাকে তবে ইনপুট না হওয়া পর্যন্ত স্থানটি পূর্ণ হবে filled

এই উভয় ক্ষেত্রেই ডিসপ্লেটি এই পদ্ধতিতে কাজ করবে।

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

সমাধানটি প্রদর্শিত হওয়ার জন্য এন্ট্রি শেষে কিছুটা বাড়তি জায়গা দেবে।

" প্রস্থ " 230 বা 240 এ বৃদ্ধি করুন এবং আপনার ভাল হওয়া উচিত।

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

Answer 8

$(document).on('keyup','#numberinput',function(){
    		var aa = $(this).val();

    		var aa = aa.substring(1);

    		if(aa.length > 5)
    		{
    			$('#numberinput').val(aa);
    		}
    	});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="" id="numberinput">