ઉકેલાયેલ: ફોર્મ ઇનપુટ ફીલ્ડ ફક્ત વાંચો

મુખ્ય પૃષ્ઠ » જાવાસ્ક્રિપ્ટ » કોણીય » ઉકેલાયેલ: ફોર્મ ઇનપુટ ફીલ્ડ ફક્ત વાંચો

ફોર્મ ઇનપુટ ફીલ્ડ, વેબ ડેવલપમેન્ટમાં સર્વવ્યાપક ઘટક, બહુવિધ ગુણધર્મો ધરાવે છે. આમાંથી એક 'ઓનલી' એટ્રિબ્યુટ છે જે ફોર્મ ફીલ્ડને ફક્ત વાંચવા માટે સેટ કરે છે. આ ખાસ કરીને એવી પરિસ્થિતિઓમાં ઉપયોગી છે જ્યાં તમે ડેટા બતાવવા માંગો છો જેને વપરાશકર્તા દ્વારા સંપાદિત કરવાની જરૂર નથી. તે વિકાસકર્તાઓને વેબ પૃષ્ઠો પરના ફોર્મ ઘટકો પર વધુ નિયંત્રણ આપે છે, એકંદર વપરાશકર્તા ક્રિયાપ્રતિક્રિયા અનુભવને સુધારે છે. આ લેખ જાવાસ્ક્રિપ્ટમાં "ઓનલી વાંચવા" વિશેષતાનો અસરકારક રીતે ઉપયોગ કેવી રીતે કરવો તે અંગેનું ઊંડાણપૂર્વકનું વિશ્લેષણ અને વ્યવહારુ માર્ગદર્શિકા છે.

ફક્ત વાંચન તરીકે પ્રસ્તુત ફોર્મ ઇનપુટ ફીલ્ડની કાર્યક્ષમતાનો ઉકેલ સમજવા માટે, તેમાં JavaScript નો ઉપયોગ કરીને DOM ને ચાલાકીનો સમાવેશ થાય છે. આ તેના ID અથવા વર્ગ દ્વારા ઇનપુટ તત્વ મેળવીને અને તેના 'રીડઓનલી' લક્ષણ સેટ કરીને પ્રાપ્ત થાય છે.

// getting the form input field by its ID
var field = document.getElementById('myField');
// setting the readonly attribute on it
field.readonly = true;

ચાલો આ JavaScript કોડને વિગતવાર તપાસીએ

ઉકેલ ઇનપુટ ફીલ્ડ પસંદ કરીને શરૂ થાય છે. આ 'getElementById' પદ્ધતિનો ઉપયોગ કરીને અમલમાં મૂકવામાં આવે છે જે પરિમાણમાં ઉલ્લેખિત ID સાથે તત્વનું પ્રતિનિધિત્વ કરતી એલિમેન્ટ ઑબ્જેક્ટ પરત કરે છે.

આગળનું પગલું આ પસંદ કરેલ ક્ષેત્રની 'રીડઓનલી' વિશેષતા સેટ કરવાનું છે. JavaScript માં, અમે HTML એલિમેન્ટના પ્રોપર્ટીઝને સીધું ઉમેરી શકીએ છીએ અથવા તેમાં ફેરફાર કરી શકીએ છીએ. આ એટ્રિબ્યુટને true પર સેટ કરીને, અમે ફોર્મ ઇનપુટ ફીલ્ડને અસંપાદિત કરી શકીએ છીએ.

લાઇબ્રેરીઓ અને ફંક્શન્સનો ઉપયોગ ફક્ત વાંચવા માટેના લક્ષણની હેરફેરમાં થાય છે

આપેલા કોડ ઉદાહરણમાં, કોઈ વધારાની JavaScript લાઈબ્રેરીઓ સામેલ નથી. જો કે, એ નોંધવું યોગ્ય છે કે જટિલ એપ્લિકેશનો માટે, jQuery જેવી JavaScript લાઇબ્રેરીઓ HTML તત્વો અને વિશેષતાઓને હેરફેર કરવાની પ્રક્રિયાને સરળ બનાવી શકે છે.

દાખલા તરીકે, નીચે jQuery નો ઉપયોગ કેવી રીતે થઈ શકે તેનું ઉદાહરણ છે:

// set the readonly attribute using jQuery
$('#myField').attr('readonly', true);

અહીં, HTML એલિમેન્ટ પસંદ કરવા માટે jQuery મેથડ '$' અને એટ્રિબ્યુટ સેટ કરવા માટે 'attr'નો ઉપયોગ થાય છે. જો કે મૂળ JavaScript HTML વિશેષતાઓને સીધી રીતે સમાયોજિત કરવા માટે સારી રીતે બંધબેસે છે, jQuery વધુ જટિલ DOM સાથે કામ કરતી વખતે અથવા જ્યારે ક્રોસ-બ્રાઉઝર સુસંગતતા મુખ્ય ચિંતા હોય ત્યારે ખૂબ ઉપયોગી બને છે.

• getElementById: તેમના ID દ્વારા HTML ઘટકોને પસંદ કરવા માટે JavaScript કાર્ય.
• attr: તત્વોના ઉલ્લેખિત લક્ષણોની કિંમત મેળવવા અથવા સેટ કરવા માટે સામાન્ય રીતે ઉપયોગમાં લેવાતી jQuery પદ્ધતિ.

નિષ્કર્ષમાં, 'ઓનલી રીડન' એટ્રિબ્યુટ HTML સ્વરૂપોમાં વપરાશકર્તાની ક્રિયાપ્રતિક્રિયાને નિયંત્રિત કરવા માટે એક મુખ્ય સાધન તરીકે સેવા આપે છે, અને JavaScript આ વિશેષતાની હેરફેર કરવા માટે કાર્યક્ષમ પદ્ધતિઓ પ્રદાન કરે છે. આ લેખ JavaScript માં 'ઓનલી વાંચવા' ના અમલીકરણ પર મુખ્ય આંતરદૃષ્ટિ પ્રદાન કરે છે, મૂળભૂત JavaScript કાર્યો અને ઉપયોગમાં લેવાતી પદ્ધતિઓ પર પ્રાઈમર તેમજ HTML એટ્રિબ્યુટ મેનીપ્યુલેશનના સંદર્ભમાં jQuery નો પરિચય છે. આ મૂળભૂત જ્ઞાન કોઈપણ વિકાસકર્તાની ટૂલકીટ માટે અનિવાર્ય છે.