CSS ஐப் பயன்படுத்தி HTML உள்ளீட்டு புலங்களில் ப்ளாஸ்ஹோல்டர் உரை நிறத்தை மாற்றுவது எப்படி

Mia Chevalier
செவ்வாய், 18 ஜூன், 2024 ’அன்று’ முற்பகல் 10:06:57
CSS

CSS உடன் ஸ்டைலிங் பிளேஸ்ஹோல்டர் உரை

HTML படிவங்களுடன் பணிபுரியும் போது, ​​உள்ளீட்டு புலங்களுக்குள் ஒதுக்கிட உரையின் தோற்றத்தை நீங்கள் தனிப்பயனாக்க விரும்பலாம். Chrome v4 மற்றும் பிற உலாவிகள் உள்ளீடு[type=text] உறுப்புகளில் ஒதுக்கிடப் பண்புக்கூறை ஆதரித்தாலும், இந்தப் பண்புக்கூறுக்கு CSS பாணிகளைப் பயன்படுத்துவது எப்போதும் எதிர்பார்த்தபடி செயல்படாது.

உதாரணமாக, நிலையான CSS தேர்விகளைப் பயன்படுத்தி ஒதுக்கிட உரை நிறத்தை மாற்ற முயற்சிப்பது விரும்பிய முடிவுகளைத் தராது. சரியான CSS போலி உறுப்புகள் மற்றும் உலாவி-குறிப்பிட்ட விதிகளைப் பயன்படுத்தி ஒதுக்கிட உரையின் நிறத்தை எவ்வாறு திறம்பட மாற்றலாம் என்பதை இந்தக் கட்டுரை ஆராய்கிறது.

கட்டளை விளக்கம்
::placeholder CSS இல் உள்ள ஒரு போலி உறுப்பு உள்ளீட்டு புலத்தின் ஒதுக்கிட உரையை வடிவமைக்கப் பயன்படுகிறது.
:focus CSS இல் உள்ள போலி-வகுப்பு, ஒரு உறுப்பு கவனம் செலுத்தும் போது, ​​பயனர் உள்ளீட்டு புலத்தில் கிளிக் செய்யும் போது பாணிகளைப் பயன்படுத்தப் பயன்படுகிறது.
opacity ஒரு தனிமத்தின் வெளிப்படைத்தன்மை அளவை அமைக்கும் CSS சொத்து. ஒதுக்கிட உரை முழுமையாகத் தெரியும் என்பதை உறுதிப்படுத்த இங்கே பயன்படுத்தப்பட்டது.
DOMContentLoaded ஆரம்ப HTML ஆவணம் முழுவதுமாக ஏற்றப்பட்டு பாகுபடுத்தப்படும் போது, ​​ஒரு ஜாவாஸ்கிரிப்ட் நிகழ்வு.
querySelector குறிப்பிட்ட CSS தேர்வாளருடன் பொருந்தக்கூடிய ஆவணத்தில் உள்ள முதல் உறுப்பை வழங்கும் JavaScript முறை.
addEventListener ஏற்கனவே உள்ள நிகழ்வு ஹேண்ட்லர்களை மேலெழுதாமல் ஒரு உறுப்புடன் நிகழ்வு ஹேண்ட்லரை இணைக்கும் ஜாவாஸ்கிரிப்ட் முறை.
setAttribute குறிப்பிட்ட உறுப்பில் ஒரு பண்புக்கூறின் மதிப்பை அமைக்கும் ஜாவாஸ்கிரிப்ட் முறை. ஒதுக்கிட உரையைப் புதுப்பிக்க இங்கே பயன்படுத்தப்பட்டது.

ப்ளேஸ்ஹோல்டர் டெக்ஸ்ட் ஸ்டைலிங் நுட்பங்களைப் புரிந்துகொள்வது

முதல் ஸ்கிரிப்ட் பயன்படுத்துகிறது , ஒரு உள்ளீட்டு புலத்தின் ஒதுக்கிட உரையை குறிவைக்கும் ஒரு CSS போலி உறுப்பு. நிலையான CSS தேர்வாளர்கள் ஒதுக்கிட உரையை பாதிக்காது என்பதால் இது மிகவும் முக்கியமானது. பயன்படுத்தி , பிளேஸ்ஹோல்டர் உரைக்கு அதன் நிறத்தை சிவப்பு நிறமாக மாற்றுவது போன்ற ஸ்டைல்களை நேரடியாகப் பயன்படுத்தலாம். கூடுதலாக, ஸ்கிரிப்ட் போன்ற உலாவி-குறிப்பிட்ட தேர்வாளர்கள் அடங்கும் Mozilla Firefox மற்றும் input::-ms-input-placeholder Internet Explorer மற்றும் Microsoft Edge க்கு. இந்தத் தேர்வாளர்கள் வெவ்வேறு உலாவிகளில் பொருந்தக்கூடிய தன்மையை உறுதிசெய்கிறார்கள், பயனரின் உலாவித் தேர்வைப் பொருட்படுத்தாமல் ஒதுக்கிட உரை வண்ணத்தை ஒரே மாதிரியாக வடிவமைக்க அனுமதிக்கிறது.

இரண்டாவது ஸ்கிரிப்ட் ஜாவாஸ்கிரிப்டை பயன்படுத்தி ஒதுக்கிட உரை நிறத்தை மாறும் வகையில் மாற்றுகிறது. இது தொடங்குகிறது ஆரம்ப HTML ஆவணம் முழுமையாக ஏற்றப்பட்ட பின்னரே ஸ்கிரிப்ட் இயங்குவதை உறுதிசெய்யும் நிகழ்வு. தி உள்ளீட்டு உறுப்பைத் தேர்ந்தெடுக்க முறை பயன்படுத்தப்படுகிறது. ஃபோகஸ் மற்றும் மங்கலான நிகழ்வுகளைக் கையாள நிகழ்வு கேட்பவர்கள் இந்த உறுப்பில் சேர்க்கப்படுகிறார்கள். உள்ளீட்டு புலம் கவனம் பெறும்போது, ​​ஒதுக்கிட உரை அழிக்கப்பட்டு, உள்ளீட்டு உரையின் நிறம் கருப்பு நிறமாக அமைக்கப்படும். உள்ளீட்டு புலம் கவனம் இழக்கும் போது, ​​ஒதுக்கிட உரை மீட்டமைக்கப்பட்டு, அதன் நிறம் சிவப்பு நிறமாக அமைக்கப்படும். தி ஒதுக்கிடப் பண்புக்கூறை மாறும் வகையில் புதுப்பிக்க இந்த முறை பயன்படுத்தப்படுகிறது, இதன் மூலம் ஒதுக்கிட உரை தோன்றுவதையும், எதிர்பார்த்தபடி மறைவதையும் உறுதி செய்கிறது.

CSS உடன் ஒதுக்கிட உரை நிறத்தை மாற்றுதல்

CSS போலி உறுப்புகளைப் பயன்படுத்துதல்

input::placeholder {
  color: red;
  opacity: 1; /* Firefox */
}

/* For Mozilla Firefox */
input:-moz-placeholder {
  color: red;
  opacity: 1;
}

/* For Internet Explorer 10-11 */
input:-ms-input-placeholder {
  color: red;
}

/* For Microsoft Edge */
input::-ms-input-placeholder {
  color: red;
}

ப்ளேஸ்ஹோல்டர் உரை வண்ணங்களைக் கையாள பின்தள தர்க்கத்தை செயல்படுத்துதல்

டைனமிக் பிளேஸ்ஹோல்டர் ஸ்டைலிங்கிற்கு ஜாவாஸ்கிரிப்டைப் பயன்படுத்துதல்

document.addEventListener("DOMContentLoaded", function() {
  var input = document.querySelector('input[type="text"]');

  input.addEventListener('focus', function() {
    input.style.color = "black";
    input.setAttribute('placeholder', '');
  });

  input.addEventListener('blur', function() {
    input.style.color = "red";
    input.setAttribute('placeholder', 'Value');
  });
});

ப்ளேஸ்ஹோல்டர் ஸ்டைலிங்கிற்கான மேம்பட்ட நுட்பங்கள்

அடிப்படை CSS மற்றும் ஜாவாஸ்கிரிப்ட் முறைகளுக்கு அப்பால், பிளேஸ்ஹோல்டர் உரையை வடிவமைக்க இன்னும் மேம்பட்ட நுட்பங்கள் உள்ளன. மேலும் டைனமிக் ஸ்டைலிங் சிஸ்டத்தை உருவாக்க CSS மாறிகளைப் பயன்படுத்துவது அத்தகைய ஒரு முறை. CSS மாறிகள், தனிப்பயன் பண்புகள் என்றும் அறியப்படுகின்றன, டெவலப்பர்கள் ஸ்டைல்ஷீட் முழுவதும் மீண்டும் பயன்படுத்தக்கூடிய மதிப்புகளைச் சேமிக்க அனுமதிக்கின்றனர். இது பல கூறுகளில் ஸ்டைல்களைப் புதுப்பிக்கும் செயல்முறையை எளிதாக்கும். உதாரணமாக, ஒதுக்கிட நிறத்திற்கான தனிப்பயன் சொத்தை வரையறுப்பதன் மூலம், பல CSS விதிகளை மாற்றாமல் ஒரே இடத்தில் நிறத்தை எளிதாக மாற்றலாம்.

கருத்தில் கொள்ள வேண்டிய மற்றொரு அம்சம், நீட்டிக்கப்பட்ட ஸ்டைலிங் திறன்களை வழங்கும் கட்டமைப்புகள் மற்றும் நூலகங்களின் பயன்பாடு ஆகும். Bootstrap போன்ற நூலகங்கள் மற்றும் Tailwind CSS போன்ற கட்டமைப்புகள் முன் வரையறுக்கப்பட்ட வகுப்புகளை வழங்குகின்றன. இந்த கருவிகள் நேரத்தை மிச்சப்படுத்தலாம் மற்றும் பயன்பாட்டின் வெவ்வேறு பகுதிகளில் நிலைத்தன்மையை உறுதி செய்யலாம். கூடுதலாக, SASS அல்லது LESS போன்ற முன்செயலிகளை மேம்படுத்துவது, கூடு கட்டுதல், மிக்சின்கள் மற்றும் மரபுரிமை போன்ற அம்சங்களுடன் CSS ஐ மேலும் மேம்படுத்தலாம், குறியீட்டை மேலும் பராமரிக்கக்கூடியதாகவும், அளவிடக்கூடியதாகவும் ஆக்குகிறது.

  1. எல்லா உலாவிகளிலும் ஒதுக்கிட உரை நிறத்தை எவ்வாறு மாற்றுவது?
  2. பயன்படுத்த , , , மற்றும் ::-ms-input-placeholder வெவ்வேறு உலாவிகளில் பொருந்தக்கூடிய தன்மையை உறுதிப்படுத்த தேர்வாளர்கள்.
  3. ஒதுக்கிட உரையின் நிறத்தை மாறும் வகையில் மாற்ற JavaScript ஐப் பயன்படுத்தலாமா?
  4. ஆம், நீங்கள் ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி நிகழ்வு கேட்பவர்களை மையப்படுத்தவும், நிகழ்வுகளை மங்கலாக்கவும், பின்னர் பயன்படுத்தலாம் ஒதுக்கிட உரை மற்றும் அதன் நிறத்தை மாற்ற.
  5. CSS மாறிகள் என்றால் என்ன, அவை பிளேஸ்ஹோல்டர்களை ஸ்டைலிங் செய்ய எப்படி உதவலாம்?
  6. CSS மாறிகள் ஸ்டைல்ஷீட் முழுவதும் மீண்டும் பயன்படுத்தக்கூடிய மதிப்புகளைச் சேமிக்க உங்களை அனுமதிக்கின்றன, இது பல கூறுகளில் தொடர்ந்து ஸ்டைல்களைப் புதுப்பிப்பதை எளிதாக்குகிறது.
  7. SASS அல்லது LESS போன்ற CSS முன்செயலிகளைப் பயன்படுத்துவதன் நன்மை என்ன?
  8. CSS முன்செயலிகள் கூடு கட்டுதல், மிக்சின்கள் மற்றும் பரம்பரை போன்ற அம்சங்களை வழங்குகின்றன, இது CSS குறியீட்டை மிகவும் பராமரிக்கக்கூடியதாகவும் அளவிடக்கூடியதாகவும் ஆக்குகிறது.
  9. Bootstrap அல்லது Tailwind CSS போன்ற கட்டமைப்புகள் பிளேஸ்ஹோல்டர்களை வடிவமைக்க உதவுமா?
  10. ஆம், இந்த கட்டமைப்புகள் முன் வரையறுக்கப்பட்ட வகுப்புகளை வழங்குகின்றன, அவை பிளேஸ்ஹோல்டர்கள், நேரத்தைச் சேமித்தல் மற்றும் நிலைத்தன்மையை உறுதி செய்தல் உள்ளிட்ட பாணி வடிவ கூறுகளுக்கு உதவும்.
  11. பிளேஸ்ஹோல்டர் உரை வண்ணத்தை அனிமேட் செய்ய வழி உள்ளதா?
  12. ப்ளேஸ்ஹோல்டர் உரையின் நேரடி அனிமேஷன் சாத்தியமில்லை என்றாலும், நீங்கள் ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி ஒதுக்கிட உரையை மாற்றலாம் மற்றும் இதேபோன்ற விளைவுக்காக உள்ளீட்டு புலத்தில் CSS மாற்றங்களைப் பயன்படுத்தலாம்.
  13. பிளேஸ்ஹோல்டர் உரையை வடிவமைக்க இன்லைன் CSS ஐப் பயன்படுத்தலாமா?
  14. இல்லை, இன்லைன் CSS போன்ற போலி கூறுகளை ஆதரிக்காது . நீங்கள் ஸ்டைல்ஷீட் அல்லது ஏ HTML க்குள் தடுக்கவும்.
  15. ப்ளேஸ்ஹோல்டர் உரையை ஸ்டைலிங் செய்யும் போது ஏற்படும் சில பொதுவான குறைபாடுகள் யாவை?
  16. குறுக்கு-உலாவி இணக்கத்தன்மையைக் கணக்கிடாதது, பயர்பாக்ஸிற்கான ஒளிபுகாநிலையைச் சேர்க்க மறப்பது மற்றும் சரியான போலி உறுப்புகள் அல்லது உலாவி-குறிப்பிட்ட தேர்வாளர்களைப் பயன்படுத்தாதது ஆகியவை பொதுவான ஆபத்துக்களில் அடங்கும்.

ப்ளேஸ்ஹோல்டர் ஸ்டைலிங் டெக்னிக்ஸ் பற்றிய இறுதி எண்ணங்கள்

HTML உள்ளீட்டு புலங்களில் ஒதுக்கிட உரையின் நிறத்தை மாற்ற CSS மற்றும் JavaScript தீர்வுகளின் கலவை தேவை. CSS போலி உறுப்புகள் மற்றும் உலாவி-குறிப்பிட்ட தேர்வாளர்களைப் பயன்படுத்துவது இணக்கத்தன்மையை உறுதி செய்கிறது, அதே நேரத்தில் JavaScript ஆனது பயனர் தொடர்புகளின் அடிப்படையில் மாறும் மாற்றங்களை செயல்படுத்துகிறது. CSS மாறிகள், கட்டமைப்புகள் மற்றும் முன்செயலிகள் போன்ற மேம்பட்ட நுட்பங்கள் ஸ்டைலிங் செயல்முறையை மேலும் மேம்படுத்தலாம், மேலும் இது மிகவும் திறமையாகவும் பராமரிக்கக்கூடியதாகவும் இருக்கும். இந்த முறைகளில் தேர்ச்சி பெறுவது படிவ அழகியல் மீது சிறந்த கட்டுப்பாட்டை அனுமதிக்கிறது, பயனர் அனுபவத்தை மேம்படுத்துகிறது.