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

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

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

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

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

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

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

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 ஐ மேலும் மேம்படுத்தலாம், குறியீட்டை மேலும் பராமரிக்கக்கூடியதாகவும், அளவிடக்கூடியதாகவும் ஆக்குகிறது.

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

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