ফর্ম ইনপুট পাঠ্য ক্ষেত্রে অনুমোদিত অক্ষরের সংখ্যা সীমিত করুন


115

আমি কীভাবে কেবল টেক্সটবক্সে সর্বাধিক পাঁচটি অক্ষর প্রবেশ করতে ব্যবহারকারীর সীমাবদ্ধ বা সীমাবদ্ধ করব?

নীচে আমার ফর্মের অংশ হিসাবে ইনপুট ক্ষেত্রটি রয়েছে:

<input type="text" id="sessionNo" name="sessionNum" />

এটি কি ম্যাক্স সাইজের মতো কিছু ব্যবহার করছে বা এরকম কিছু?


16
এখানে <input type="text" maxlength="5"> লাইভ ডেমো: jsfiddle.net/mcBbW/1
Vidas

উত্তর:


174

দৈর্ঘ্য :

অক্ষরের সর্বাধিক সংখ্যা যা ইনপুট হিসাবে গৃহীত হবে। এটি SIZE দ্বারা নির্দিষ্ট করা বৃহত্তর হতে পারে, ক্ষেত্রে ক্ষেত্রে ক্ষেত্রটি যথাযথভাবে স্ক্রোল করবে। ডিফল্ট সীমাহীন।

<input type="text" maxlength="2" id="sessionNo" name="sessionNum" onkeypress="return isNumberKey(event)" />

তবে এটি আপনার হ্যান্ডলার দ্বারা প্রভাবিত হতে পারে বা নাও হতে পারে। দৈর্ঘ্য পরীক্ষা করার জন্য আপনাকে অন্য হ্যান্ডলার ফাংশনটি ব্যবহার করতে বা যুক্ত করতে হতে পারে।


ইনপুটিং পর্যায়ে সীমাবদ্ধ করার সময় আমি এই উত্তরটি দরকারী বলে মনে করেছি। patternবৈশিষ্ট্যটি ব্যবহার করে কোনও বৈধতা বার্তা জমা দেওয়ার এবং পপআপ করার সময় আপনি বৈধতা পর্বে এটি সীমাবদ্ধও করতে পারেন । দেখুন stackoverflow.com/questions/10281962/...

31

এটি করার সহজ উপায়:

maxlength="5"

সুতরাং .. আপনার নিয়ন্ত্রণে এই বৈশিষ্ট্য যুক্ত করা:

<input type="text" 
    id="sessionNo" 
    name="sessionNum" 
    onkeypress="return isNumberKey(event)" 
    maxlength="5" />

8

নিম্নলিখিতটি শিরোনামে যুক্ত করুন:

<script language="javascript" type="text/javascript">
function limitText(limitField, limitNum) {
    if (limitField.value.length > limitNum) {
        limitField.value = limitField.value.substring(0, limitNum);
    }
}
</script>

    <input type="text" id="sessionNo" name="sessionNum" onKeyDown="limitText(this,5);" 
onKeyUp="limitText(this,5);"" />

this.form.sessionNoএকটু সন্দেহ হয় বলে মনে হচ্ছে। শুধু কেন নয় this? এছাড়াও, limitCountএবং limitNumঅযৌক্তিকভাবে / অপ্রয়োজনীয় বলে মনে হচ্ছে?
জারেড ফারিশ

1
সংশোধন করেছেন আপনি যদি কিছু নির্দিষ্ট অক্ষর বা সংখ্যায় সীমাবদ্ধ করতে চান তবে এই পদ্ধতিটি করছেন, তবে আপনি যদি সেটির বিষয়ে চিন্তা না করেন তবে সর্বোচ্চ দৈর্ঘ্য ভাল কাজ করবে। সুতরাং বলুন যে আপনি যদি মানগুলি 1-50 এর মধ্যে হতে চান তবে আপনি বা সমস্ত ধনাত্মক সংখ্যা ইত্যাদি হতে পারে
বি 3 ভেরিলাবস

this.form.sessionNoএখনও ঠিক মনে হচ্ছে না। thisসেই প্রসঙ্গে input, নির্দেশ করবে না document
জ্যারেড ফারিশ ১

এখনও ঠিক নয়, এটি formউভয়ই উল্লেখ করে না। thisআপনার যা দরকার তা হল। এছাড়াও, টেকনিক্যালি যদি আপনি উপাদান রেফারেন্স অনুপস্থিত ছিল form, এটা দ্বারা (হবে form/ input) name, না id: অর্থাত document.formName.sessionNum
জ্যারেড ফারিশ

সঠিক আমি দ্রুত টাইপ করেছি এটি আগে একটি ফর্ম আবৃত ছিল। তবে আপনি কেবলমাত্র ক্ষেত্রের বর্তমান মান পেতে ফাংশনটিতে ইনপুটটি পাঠিয়ে দিতে চাইলে সেই ক্ষেত্রটি সীমাবদ্ধ করতে চান এমন যুক্তি যুক্ত করুন।
বি

8

ডাব্লু 3 সি এর মতে , ম্যাক্সএলএনজিএইচবি বৈশিষ্ট্যের জন্য ডিফল্ট মান একটি সীমাহীন সংখ্যা। সুতরাং আপনি যদি সর্বোচ্চটি নির্দিষ্ট না করেন তবে ব্যবহারকারী কয়েকবার বাইবেল কেটে পেস্ট করতে পারে এবং এটি আপনার আকারে আটকে দিতে পারে।

এমনকি আপনি যদি যুক্তিসঙ্গত সংখ্যায় MAXLENGTH নির্দিষ্ট করে থাকেন তবে প্রক্রিয়া করার আগে সার্ভারে জমা দেওয়া ডেটার দৈর্ঘ্য দ্বিগুণ পরীক্ষা করে নিশ্চিত করুন (পিএইচপি বা এসপি জাতীয় কিছু ব্যবহার করে) যাইহোক যাইহোক বেসিক ম্যাক্সেলএনজিএইচ বিধিনিষেধের কাছাকাছি পৌঁছানো বেশ সহজ easy


1
@ লোপিজডিপি, এইচটিএমএল / জাভাস্ক্রিপ্ট বিধিনিষেধগুলি "প্রায় পেতে" একাধিক উপায় রয়েছে। চেক করার সহজতমটি হ'ল ক্রম দিয়ে আপনার পৃষ্ঠাটি খুলুন, "উপাদানটি পরীক্ষা করুন" এবং ম্যানুয়ালি এইচটিএমএল পরিবর্তন করুন। কাছাকাছি যাওয়ার আরও বিস্তৃত উপায় - একটি স্ক্রিপ্ট লিখুন যা কোনও নিষেধাজ্ঞাকে উপেক্ষা করে ডেটা পোস্ট করবে (কার্ল লাইব্রেরি বা অনুরূপ কিছু ব্যবহার করে)। ব্যাকএন্ড বিকাশকারী হিসাবে আপনার কখনই ডেটার সম্মুখভাগের বৈধতার উপর বিশ্বাস করা উচিত নয় - সমস্ত নিয়ম সার্ভারে নকল করা উচিত। ফ্রন্টএন্ড বৈধতা সার্ভারের কাছে কোনও অনুরোধ না করে সুস্পষ্ট ত্রুটিগুলি নির্দেশ করে ব্যবহারকারীর জন্য সময় বাঁচানোর একমাত্র উপায় a
পেট্রুশেখ


4

এটিকে আরও সহজ করুন

<input type="text" maxlength="3" />

এবং সর্বাধিক অক্ষর ব্যবহৃত হয়েছে তা দেখানোর জন্য একটি সতর্কতা ব্যবহার করুন।


3

আমি সবসময় এটি এরকম করে করি:

$(document).ready(function(){
var maxChars = $("#sessionNum");
var max_length = maxChars.attr('maxlength');
if (max_length > 0) {
    maxChars.bind('keyup', function(e){
        length = new Number(maxChars.val().length);
        counter = max_length-length;
        $("#sessionNum_counter").text(counter);
    });
}
});

ইনপুট:

<input name="sessionNum" id="sessionNum" maxlength="5" type="text">
Number of chars: <span id="sessionNum_counter">5</span>

2

সর্বোচ্চ দৈর্ঘ্য

অক্ষরের সর্বাধিক সংখ্যা যা ইনপুট হিসাবে গৃহীত হবে। সর্বাধিক দৈর্ঘ্যের বৈশিষ্ট্যটি উপাদানটিতে অনুমোদিত অক্ষরের সর্বাধিক সংখ্যা নির্দিষ্ট করে।

সর্বোচ্চ দৈর্ঘ্য ডাব্লু 3 স্কুল

<form action="/action_page.php">
    Username: <input type="text" name="usrname" maxlength="5"><br>
    <input type="submit" value="Submit">
</form>

1

আপনি ব্যবহার করতে পারেন <input type = "text" maxlength="9"> বা

<input type = "number" maxlength="9">সংখ্যার জন্য বা <input type = "email" maxlength="9">ইমেল বৈধতার জন্য প্রদর্শিত হবে


1
<input type="number" id="xxx" name="xxx" oninput="maxLengthCheck(this)" maxlength="10">

function maxLengthCheck(object) {
  if (object.value.length > object.maxLength)
  object.value = object.value.slice(0, object.maxLength)
}

0

ম্যাক্সলিংহিট = "চার্টারের সংখ্যা" ব্যবহার করুন

<input type="text" id="sessionNo" name="sessionNum" maxlenght="7" />

0

নিম্নলিখিত কোডটিতে একটি গণনা রয়েছে ...

var count = 1;

do {
    function count_down(obj, count){

    let element = document.getElementById('count'+ count);

    element.innerHTML = 80 - obj.value.length;

    if(80 - obj.value.length < 5){
        element.style.color = "firebrick";
    }else{
        element.style.color = "#333";
    }
}
count++;
} while (count < 20); 
.text-input {
    padding: 8px 16px;
    width: 50%;
    margin-bottom: 5px;
    margin-top: 10px;
    font-size: 20px;
    font-weight: 700;
    font-family: Raleway;
    border: 1px solid dodgerblue;
  }
<p><input placeholder="Title" id="bike-input-title" onkeyup="count_down(this, 3)" maxlength="80"  class="text-input" name="bikeTitle" ></p>
        <span id="count3" style="float: right; font-family: Raleway; font-size:20px; font-weight:600; margin-top:-5px;">80</span><br>


-1
<input type="text" name="MobileNumber" id="MobileNumber" maxlength="10" onkeypress="checkNumber(event);"  placeholder="MobileNumber">

<script>
function checkNumber(key) {
  console.log(key);
  var inputNumber = document.querySelector("#MobileNumber").value;
  if(key.key >= 0 && key.key <= 9) {
    inputNumber += key.key;
  }
  else {
    key.preventDefault();
  }
}
</script>
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.