পূর্বে সেট করা সীমানার রঙ সরান

Question

function validate() {
	var username = document.getElementById("username").value;
	var password = document.getElementById("password").value;

	if (username == "") {

		document.getElementById("message").innerHTML = "USERNAME CANNOT BE EMPTY";
		document.getElementById("username").style.borderColor = "red";
		return false;
	}
	if (password == "") {


		document.getElementById("message").innerHTML = "PASSWORD CANNOT BE EMPTY";
		document.getElementById("password").style.borderColor = "red";
		return false;
	}
}

#username:focus {
	background-color: yellow;
	border-color: green;
}

#password:focus {
	background-color: yellow;
	border-color: green;
}

#message {
	color: red;
}

<form onsubmit=" return validate()">
    LOGIN:-
    <br>
    <input id="username" type="text" name="username" placeholder="USERNAME">
    <br>
    <input id="password" type="password" name="password" placeholder="PASSWORD">
    <br>
    <input type="submit" value="SUBMIT">
    <p id="message">
</form>

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

আমি চাই এটি কেবল সবুজ হোক। আপনি এই আচরণের কারণও ব্যাখ্যা করতে পারেন।

Answer 1

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

অনুযায়ী ডকুমেন্টেশন কমছে অনুক্রমে শৈলী ক্রম হবে।

1. ইনলাইন শৈলী (একটি এইচটিএমএল উপাদানের অভ্যন্তরে)
2. বাহ্যিক এবং অভ্যন্তরীণ স্টাইল শীট (প্রধান বিভাগে)
3. ব্রাউজার ডিফল্ট

এখানে একটি কাজের উদাহরণ

function validate() {
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;

    if (username == "") {
        document.getElementById("message").innerHTML = "USERNAME CANNOT BE EMPTY";
        document.getElementById("username").classList.add("invalidInput");
        return false;
    } else {
        document.getElementById("username").classList.remove("invalidInput")
    }
    if (password == "") {
        document.getElementById("message").innerHTML = "PASSWORD CANNOT BE EMPTY";
        document.getElementById("password").classList.add("invalidInput")
        return false;
    } else {
        document.getElementById("password").classList.remove("invalidInput")
    }
}

#username:focus {
    background-color: yellow;
    border-color: green;
}

#password:focus {
    background-color: yellow;
    border-color: green;
}

.invalidInput {
    border-color: red; 
}

#message {
    color: red;
}

<form onsubmit=" return validate()">
    LOGIN:-
    <br />
    <input id="username" type="text" name="username" placeholder="USERNAME" />
    <br />
    <input id="password" type="password" name="password" placeholder="PASSWORD" />
    <br />
    <input type="submit" value="SUBMIT" />
    <p id="message"></p>
</form>

Comments

এটি উত্তর হিসাবে গ্রহণ করা উচিত, যোগ করা হিসাবে গুরুত্বপূর্ণ! একটি ভাল পদ্ধতির নয়

— পিয়ুশ

ওজন ইতিমধ্যে আপনি যে শব্দটি অনুসন্ধান করছেন এটি-বয়স প্রত্যয় যুক্ত করার দরকার নেই।

— ইমানুয়েল ভিন্টিলি

Answer 2

সমস্যাটি হ'ল রংগুলির CSS এর একই স্তরের গুরুত্ব রয়েছে এবং তাই কোডটি কোনটি অগ্রাধিকার দিতে পারে তা জানে না। সুতরাং, এটি ঠিক করতে, আপনাকে সিএসএস কোডে সবুজটিকে আরও গুরুত্বপূর্ণ করতে হবে।

এটি দেখতে ফোকাস সিএসএস কোড পরিবর্তন করুন।

#username:focus {
  background-color: yellow !important;
  border-color: green !important;
}

#password:focus {
  background-color: yellow !important;
  border-color: green !important;
}

#message {
  color: red;
}

আশাকরি এটা সাহায্য করবে!

Comments

এটি যখন সমস্যার সমাধান করে, আমি বিভ্রান্ত হয়ে পড়েছি, কেন যখন কোনও সম্পত্তি নতুন মান দিয়ে পুনরায় সেট করা হয় সেখানে অগ্রাধিকারের সমস্যাটি ঘটে ?!

— টিক 20

@ গীতাঞ্জলীর উত্তরটি দেখুন। এটি আপনি যা বলছেন তা সঠিকভাবে পরিচালনা করে।

— হরি দাস

এটি একটি ভাল প্রশ্ন। কারণ সিএসএসে যখন আপনি 'ফোকাস' এর মতো বৈশিষ্ট্য যুক্ত করেন আপনি সেই উপাদানটিতে শ্রোতা যুক্ত করছেন, আপনি এটি কোনও নতুন মান দিয়ে পুনরায় সেট করছেন না। বৈশিষ্ট্যটি কেবল তখন কার্যকর হয় যখন আপনি element উপাদানটির দিকে মনোনিবেশ করেন।

— অস্টিন লিহালি

Answer 3

জাভাস্ক্রিপ্ট থেকে রঙ যুক্ত করার পরিবর্তে আপনি ইনপুট বাক্সে প্রয়োজনীয় ব্যবহার করতে পারেন এবং: সিএসএসে অবৈধ। স্নিপেট পরীক্ষা করুন

function validate() {
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;

  if (username == "") {

    document.getElementById("message").innerHTML = "USERNAME CANNOT BE EMPTY";
    //document.getElementById("username").style.borderColor = "red";
    return false;
  }
  if (password == "") {


    document.getElementById("message").innerHTML = "PASSWORD CANNOT BE EMPTY";
    //document.getElementById("password").style.borderColor = "red";
    return false;
  }

}

#username:focus{
  background-color: yellow;
  border-color: green;
}

#username:invalid{
  background-color: none;
  border-color: red;
}

#password:focus{
  background-color: yellow;
  border-color: green;
}
#password:invalid{
  background-color: none;
  border-color: red;
}


#message {
  color: red;
}

<form onsubmit=" return validate()">
  LOGIN:-
  <br>
  <input id="username" type="text" name="username" placeholder="USERNAME" required>
  <br>
  <input id="password" type="password" name="password" placeholder="PASSWORD" required>
  <br>
  <input type="submit" value="SUBMIT">
  <p id="message">

</form>

Answer 4

আপনি কীপটিতে কেবল সীমানার রঙটি ফিরিয়ে দিতে পারেন এবং errorসীমানার রঙকে লাল রঙে ওভাররাইট করতে একটি নতুন শ্রেণি তৈরি করতে পারেন

function retainColor(ele){
  ele.style.borderColor = "inherit";
  document.getElementById("message").innerHTML = "";
}
function validate() {
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;

  if (username == "") {

    document.getElementById("message").innerHTML = "USERNAME CANNOT BE EMPTY";
    document.getElementById("username").classList.add("error");
    return false;
  }else{
    document.getElementById("username").classList.remove("error");
  }
  if (password == "") {
    document.getElementById("message").innerHTML = "PASSWORD CANNOT BE EMPTY";
    document.getElementById("password").classList.add("error");
    return false;
  }else{
    document.getElementById("password").classList.remove("error");
  }

}

#username:focus {
  background-color: yellow;
  border-color: green;
}

#password:focus {
  background-color: yellow;
  border-color: green;
}
.error {
  border-color: red;
}

.error {
  border-color: red;
}

#message {
  color: red;
}

<form onsubmit=" return validate()">
  LOGIN:-
  <br>
  <input id="username" type="text" onkeyup="retainColor(this)" name="username" placeholder="USERNAME">
  <br>
  <input id="password" type="password" onkeyup="retainColor(this)" name="password" placeholder="PASSWORD">
  <br>
  <input type="submit" value="SUBMIT">
  <p id="message">

</form>

Comments

সিএসএসে !importantকোনও উপাদানের সাথে সম্পত্তি যুক্ত করা শৈলীটিকে কোনও অবস্থাতেই অ-আপডেটযোগ্য করে তোলে।

— নীতীশ

Answer 5

আপনি জেএস এর মাধ্যমে রঙগুলি সেট করছেন তবে এগুলি কখনও আন-সেট করবেন না, তাই মূলত সেগুলি স্থায়ীভাবে সেট করা হচ্ছে।

এই আচরণটি থামানোর একটি উপায় হ'ল OnClickপাঠ্য ক্ষেত্রগুলির ইভেন্টটি ধরার সাথে অন্য একটি ফাংশন যুক্ত করা এবং "পুনরায় সেট করা" বা unsetরঙগুলি যখন সেগুলি ভিতরে ক্লিক করা হয় তখন।

কীভাবে OnClickইভেন্টটি পরিচালনা করা শুরু করবেন সে সম্পর্কে একটি ধারণার জন্য এখানে দেখুন :

https://jsfiddle.net/warunamanjula/qy0hvmyq/1/

Answer 6

শুধু যোগ কর onfocus বৈশিষ্ট্য যুক্ত করুন

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

function validate() {
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;

  if (username == "") {

    document.getElementById("message").innerHTML = "USERNAME CANNOT BE EMPTY";
    document.getElementById("username").style.borderColor = "red";
    return false;
  }
  if (password == "") {


    document.getElementById("message").innerHTML = "PASSWORD CANNOT BE EMPTY";
    document.getElementById("password").style.borderColor = "red";
    return false;
  }

}

function myfunction(var id){
 document.getElementById(id).style.borderColor = "green";
 document.getElementById(id).style.background-color= "yellow";
}

এইচটিএমএল

<form onsubmit=" return validate()">
  LOGIN:-
  <br>
  <input id="username" type="text" onfocus="myFunction('username')" name="username" placeholder="USERNAME">
  <br>
  <input id="password" type="password" onfocus="myFunction('password')" name="password" placeholder="PASSWORD">
  <br>
  <input type="submit" value="SUBMIT">
  <p id="message">

</form>

Answer 7

কারণ আপনি যখন জাভাস্ক্রিপ্ট বা সিএসএসের কোনও সম্পত্তি থেকে রঙ যুক্ত করবেন তখন এটি ইনলাইন যুক্ত হয়, তাই কেবল ফোকাস লিখুন border-color !important।