আপনি কীভাবে স্বয়ংক্রিয়ভাবে পাঠ্য বাক্সকে বড় হাতের কাছে সেট করবেন?

Question

আমি বড় শৈলীতে ব্যবহারকারীদের ইনপুট সেট করতে নিম্নলিখিত স্টাইলের বৈশিষ্ট্যটি ব্যবহার করছি যাতে ব্যবহারকারী যখন উদাহরণস্বরূপ পাঠ্য বাক্সে টাইপ শুরু করেন railway, তখন এটি RAILWAY ক্যাপস-লক বোতামটি চাপ না দিয়ে ব্যবহারকারীকে বড় অক্ষরে পরিবর্তিত করা উচিত ।

ইনপুটটির জন্য আমি এই কোডটি ব্যবহার করছি:

<input type = "text" class = "normal" name = "Name" size = "20" maxlength = "20"> <img src="../images/tickmark.gif" border="0" style='text-transform:uppercase'/>

তবে আমি এই গুণটি ব্যবহার করে পছন্দসই আউটপুট পাচ্ছি না।

Comments

নীচে উল্লিখিত হিসাবে, সতর্কতা অবলম্বন করুন = এবং "পাঠ্য" এর মানগুলির মধ্যে

— জোনাথন সাফা

Answer 1

আপনি এর পরিবর্তে ট্যাগটিতে styleবৈশিষ্ট্যটি রেখেছেন ।<img><input>

বৈশিষ্ট্যটির নাম এবং মানের মধ্যে ফাঁকা স্থান রাখা ভাল ধারণাও নয় ...

<input type="text" class="normal" 
       name="Name" size="20" maxlength="20" 
       style="text-transform:uppercase" /> 
<img src="../images/tickmark.gif" border="0" />

দয়া করে মনে রাখবেন এই রূপান্তরটি নিখুঁতভাবে দৃশ্যমান এবং পোষ্টে প্রেরিত পাঠ্যটি পরিবর্তন করে না change

Comments

মনে রাখবেন যে আপনি যদি কোনও পোস্টের মাধ্যমে এই ডেটা প্রেরণ করেন তবে এটি স্ক্রিনে কীভাবে প্রদর্শিত হবে তা নয়, আপনি এটি টাইপ করলেও এটি প্রেরণ করবে।

— ভিনসেন্ট পোইরিয়ার

@ ফ্রিফ্যালার, এটি সমস্ত ইনপুটকে বড় হাত থেকে পরিবর্তিত করেছে তবে মাইএসকিএল-তে সন্নিবেশ করানো হ'ল ছোট হাতের পাঠ্য, কীভাবে বড় হাতের অক্ষর পরিবর্তন করা যায়!

— ডেভিড জে এইচপান

@ ডেভিড, পূর্ববর্তী মন্তব্য দেখুন। রূপান্তরটি নিখুঁতভাবে চাক্ষুষ। এটি সার্ভারে ফিরে পাঠানো অন্তর্নিহিত পাঠ্যের ক্ষেত্রে কোনও পরিবর্তন করে না। আপনি যদি বড় হাতের টেক্সটটি সংরক্ষণ করতে চান তবে সংরক্ষণের আগে আপনাকে অবশ্যই এটি সার্ভারে রূপান্তর করতে হবে

— ফ্রিফালার

এটি সম্পূর্ণ সমাধান নয়, যেহেতু স্থানধারক এখন বড় হাতের (যা বেশিরভাগ ক্ষেত্রে হওয়া উচিত নয়)। জাভাস্ক্রিপ্ট ব্যবহার করা ছাড়া অন্য কোনও উপায় নেই।

— tomericco

ভবিষ্যতের পাঠকরা যারা বিশুদ্ধরূপে পরিবর্তনের পরিবর্তে মূল্যবোধে পরিবর্তন আনতে চান, তারা বুরাক টোককের উত্তর দেখুন ।

— দিনাই 31'17

Answer 2

আমি মনে করি যে সবচেয়ে শক্তিশালী সমাধান যেটি বড় হাতের মধ্যে পোস্ট করা হয়েছে তা নিশ্চিত করে যে অনিনপুট পদ্ধতিটি ইনলাইন ব্যবহার করা উচিত:

<input oninput="this.value = this.value.toUpperCase()" />

সম্পাদনা

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

<input oninput="let p=this.selectionStart;this.value=this.value.toUpperCase();this.setSelectionRange(p, p);" />

Answer 3

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

আপনার ইনপুট জন্য এইচটিএমএল অনকিডাউন ব্যবহার করুন:

<input name="yourInput" onkeydown="upperCaseF(this)"/>

আপনার জাভাস্ক্রিপ্টে:

function upperCaseF(a){
    setTimeout(function(){
        a.value = a.value.toUpperCase();
    }, 1);
}

সঙ্গে upperCaseF()প্রতিটি কী চেপে ধরে ফাংশন ইনপুটটির মানটি তার বড় আকারে রূপান্তরিত করতে চলেছে।

আমি 1 মিমি বিলম্বও যুক্ত করেছি যাতে কীডাউন ইভেন্টটি ঘটানোর পরে ফাংশন কোড ব্লকটি ট্রিগার করে।

Comments

এক ব্যবহার করতে পারে ঘটনা পরিবর্তে এবং পরিত্রাণ পেতে কার্যসংক্রান্ত। inputkeydownsetTimeout

— দিনাই 31'17

এটি কাজ করে, তবে আপনি কীভাবে বড় হাতের নাগালে কুৎসিত স্প্লিট দ্বিতীয় লোয়ারকেস এড়িয়ে চলবেন?

— জোনাথন সাফা

"ইনপুট ইভেন্ট" ধারণাটি নিয়ে এই inputউপাদানটির সাথে এই বৈশিষ্ট্যটি যুক্ত করা ভাল কাজ করে বলে মনে হচ্ছে:oninput="this.value = this.value.toUpperCase()"

— টমি স্ট্যান্টন

@ text-transform:uppercase

— জোনাথনসফা ইনপুটটিকে

যখন কোনও ব্যবহারকারী বিদ্যমান পাঠ্য সম্পাদনা করে কার্সারটিকে শেষের বাইরে অন্য কোথাও রাখে, তখন প্রতিটি অক্ষর টাইপ করে কার্সারটি শেষ দিকে চলে যাবে। কার্সার অবস্থান সংরক্ষণের পাশাপাশি পাঠ্যটি বড়হাতে রূপান্তর করারও কি কোনও উপায় আছে?

— মাইক ওয়াডার্সেক

Answer 4

প্রথম উত্তরের সমস্যাটি হ'ল প্লেসোল্ডারটিও বড়হাতে বড় হবে। আপনি যদি কেবল ইনপুটটি বড়হাতে চান তবে নিম্নলিখিত সমাধানটি ব্যবহার করুন।

খালি খালি ইনপুট উপাদান নির্বাচন করতে, উপাদানটিতে প্রয়োজনীয় বৈশিষ্ট্যটি রাখুন:

<input type="text" id="name-input" placeholder="Enter symbol" required="required" />

এখন, এটি নির্বাচন করতে, :validসিউডো-উপাদানটি ব্যবহার করুন :

#name-input:valid { text-transform: uppercase; }

এইভাবে আপনি কেবল প্রবেশ করা অক্ষরগুলি বড় হাতের অক্ষরে রেখে দেবেন।

Comments

এই উত্তরটি কার্যকর হয় না এবং তাও বোঝায় না। কেন ইনপুট বৈধ হলে কেবল একটি নির্বাচন কেন ইনপুট পাঠ্যকে প্রভাবিত করবে এবং স্থানধারককে নয়? আমি অনুমান করি যে ফাঁকা যদি কোনও বৈধ মান না হয় তবে এটি সুযোগক্রমে কার্যকর হতে পারে। আমি এখানে উত্তরটি ব্যবহার করেছি: স্ট্যাকওভারফ্লো.

— com/

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

— tomericco

এটি সত্যিই দরকারী সমাধান এবং আমার প্রয়োজনটি ঠিক এটি। এটি প্রতিটি অবস্থার সাথে খাপ খায় না কারণ এটি ক্ষেত্রের প্রয়োজনের উপর নির্ভর করে, তবে এটি অবশ্যই টুলবক্সে রাখা সহজ!

— টিম ম্যকি 21

Answer 5

চেষ্টা

<input type="text" class="normal" 
       style="text-transform:uppercase" 
       name="Name" size="20" maxlength="20"> 
 <img src="../images/tickmark.gif" border="0"/>

ইনপুটটিতে চিত্রের পরিবর্তে স্টাইল ট্যাগ রাখুন কারণ আপনি চিত্রটিতে নয় ইনপুটটিতে লিখছেন

Comments

এটি যাইহোক, স্থানধারক পাঠকে বড় আকারের করে তোলে।

— কাজিম জায়েদী

Answer 6

সমস্ত পাঠ্যবাক্সকে বড় হাতের সাথে সেট করতে নিম্নলিখিত স্টাইলটি সেট করুন

input {text-transform: uppercase;}

Answer 7

সিএসএস স্টাইলিংয়ের সমস্যাটি হ'ল এটি ডেটা পরিবর্তন করছে না, এবং আপনি যদি জেএস ফাংশন রাখতে না চান তবে চেষ্টা করুন ...

<input onkeyup="this.value = this.value.toUpperCase()" />

নিজে থেকে আপনি ক্ষেত্রটি কীআপে মূলধনটি দেখতে পাবেন, তাই এটির style='text-transform:uppercase'পরামর্শ দেওয়া অন্যদের সাথে এটি একত্রিত করা বাঞ্ছনীয় ।

Answer 8

সিএসএস ব্যবহার করা text-transform: uppercaseপ্রকৃত ইনপুট পরিবর্তন করে না তবে কেবল তার চেহারা পরিবর্তন করে। আপনি যদি কোনও সার্ভারে ইনপুট ডেটা প্রেরণ করেন তবে এটি এখনও ছোট হাতের কাছে চলেছে বা আপনি এটি প্রবেশ করলে। প্রকৃতপক্ষে ইনপুট মানটি রূপান্তর করতে আপনাকে নীচে জাভাস্ক্রিপ্ট কোড যুক্ত করতে হবে:

document.querySelector("input").addEventListener("input", function(event) {
  event.target.value = event.target.value.toLocaleUpperCase()
})

<input>

এখানে আমি toLocaleUpperCase()রূপান্তর করতে ব্যবহার করছিinput মানকে বড়হাতে । আপনি যেটি প্রবেশ করেছেন তার সম্পাদনা করার আগ পর্যন্ত এটি ঠিক কাজ করে, যেমন আপনি যদি এবিসিএক্সওয়াইজেড প্রবেশ করে এবং এখন আপনি এটি এবিসিএলএমএনএক্সজেডে পরিবর্তন করার চেষ্টা করেন, এটি এবিসিএলএক্সএইজেডএমএন হয়ে যাবে কারণ প্রতিটি ইনপুট পরে কার্সারটি শেষ পর্যন্ত লাফিয়ে যায়।

কার্সারের এই জাম্প কাটিয়ে উঠতে আমাদের ফাংশনে নিম্নলিখিত পরিবর্তনগুলি করতে হবে:

document.querySelector("input").addEventListener("input", function(event) {
  var input = event.target;
  var start = input.selectionStart;
  var end = input.selectionEnd;
  input.value = input.value.toLocaleUpperCase();
  input.setSelectionRange(start, end);
})

<input>

এখন সবকিছু প্রত্যাশা মতো কাজ করে, তবে আপনার ধীর পিসি থাকলে আপনি টাইপ করার সাথে সাথে আপনি ছোট হাত থেকে বড় হাতের দিকে ছোট ছোট পাঠ্য দেখতে পাবেন। যদি এটি আপনাকে বিরক্ত করে, এই সময়টি সিএসএস ব্যবহারের সময়, input: {text-transform: uppercase;}সিএসএস ফাইলে প্রয়োগ করুন এবং সবকিছু ঠিকঠাক হবে।

Answer 9

এটি উভয়ই বড় হাতের ইনপুট প্রদর্শন করবে এবং বড় হাতের পোস্টের মাধ্যমে ইনপুট ডেটা প্রেরণ করবে।

এইচটিএমএল

<input type="text" id="someInput">

জাভাস্ক্রিপ্ট

var someInput = document.querySelector('#someInput');
someInput.addEventListener('input', function () {
    someInput.value = someInput.value.toUpperCase();
});

Answer 10

যেমন কেউ এর পরামর্শ দেয়নি:

আপনি যদি ছোট ছোট স্থানধারীদের সাথে সিএসএস সলিউশনটি ব্যবহার করতে চান তবে আপনাকে কেবল স্থানধারকদের আলাদাভাবে স্টাইল করতে হবে। IE সামঞ্জস্যের জন্য 2 স্থানধারক শৈলী বিভক্ত করুন।

input {
    text-transform: uppercase;
}
input:-ms-input-placeholder {
    text-transform: none;
}
input::placeholder {
    text-transform: none;
}

The below input has lowercase characters, but all typed characters are CSS-uppercased :<br/>
<input type="text" placeholder="ex : ABC" />

Answer 11

সমাধানের নীচে চেষ্টা করুন, যখন কোনও ব্যবহারকারী প্রথম সূচীতে ইনপুট ক্ষেত্রে কেবল ফাঁকা স্থান প্রবেশ করে তখন এটিও যত্ন নেবে।

document.getElementById('capitalizeInput').addEventListener("keyup",   () => {
  var inputValue = document.getElementById('capitalizeInput')['value']; 
  if (inputValue[0] === ' ') {
      inputValue = '';
    } else if (inputValue) {
      inputValue = inputValue[0].toUpperCase() + inputValue.slice(1);
    }
document.getElementById('capitalizeInput')['value'] = inputValue;
});

<input type="text" id="capitalizeInput" autocomplete="off" />

Answer 12

<script type="text/javascript">
    function upperCaseF(a){
    setTimeout(function(){
        a.value = a.value.toUpperCase();
    }, 1);
}
</script>

<input type="text" required="" name="partno" class="form-control" placeholder="Enter a Part No*" onkeydown="upperCaseF(this)">

Comments

এই উত্তরটি ইতিমধ্যে প্রদত্ত সকলের থেকে কীভাবে আলাদা হয়?

— মকর রাশি