متن ورودی جاوااسکریپت

با ویژگی متن ورودی جاوااسکریپت در این مقاله همراه ما باشید.

نکات اصلی متن ورودی جاوااسکریپت:

• از ویژگی متن ورودی JavaScript برای تنظیم یا برگرداندن مقدار یک فیلد ورودی متن استفاده می شود.
• ویژگی value یا مقدار پیش فرضی را که هنگام بارگیری عنصر وجود دارد ، مقدار وارد شده توسط کاربر یا مقدار اختصاص داده شده توسط اسکریپت را در بر می گیرد.

textObject.value ویژگی توضیح داده شده

ویژگی JavaScript .value می تواند به شما در مدیریت محتوای وب سایت هایتان کمک کند. به عنوان مثال ، فرم ها و لیست های کشویی عناصر قابل تاملی هستند که سازندگان وب سایت برای برقراری ارتباط با بازدید کنندگان یا بازیابی اطلاعات در صفحات خود قرار می دهند.

مثال کد زیر نشان می دهد که چگونه ویژگی ورودی JavaScript می تواند مقدار فیلد متنی را تغییر دهد:

document.getElementById("sampleText").value = "John Bonham";

با این حال ، اگر می خواهید کار JavaScript دریافت مقدار ورودی را انجام دهید ، باید همه آنچه را که بعد از علامت برابر می آید حذف کنید. سپس ، مقدار را تعیین نمی کنید بلکه آن را دریافت می کنید.

آن را درست بنویسید

ما دو مثال از مقدار ورودی استفاده از JavaScript داریم. اولین کدی دارای کدی است که ارزش خاصیت را برمی گرداند. JavaScript مقدار ورودی را دریافت می کند:

textObject.value

از مثال دوم می توان برای تعیین مقدار خاصیت استفاده کرد. همانطور که مشاهده می کنید ، حاوی مقداری به نام متن است که مقدار فیلد ورودی متن را نشان می دهد:

textObject.value = متن

درست مانند بسیاری دیگر از ویژگی های جاوا اسکریپت ، این ویژگی نیز مقدار بازگشتی ایجاد می کند. ویژگی مقدار متن ورودی JavaScript رشته ای را تولید می کند که حاوی مقدار فیلد متن است.

مثالهای مفید کد برای تمرین

اگر فقط شروع به یادگیری JavaScript با مقدار get input می کنید ، توصیه می کنیم با تمرین مثالهای کدی که در این بخش ارائه می دهیم ، شروع کنید. اگرچه مورد اول طولانی به نظر می رسد ، اما نشان می دهد که چگونه می توان به اعتبار سنجی فرم دست یافت:

var email = document.getElementById("email").value.indexOf("@");
var age = document.getElementById("age").value;
var firstName = document.getElementById("firstName").value;   
Submitted = "true";
if (firstName.length > 10) {
    alert("The name must have no more than 10 characters");  
    Submitted = "false";
}
if (isNaN(age) || age < 12 || age > 100) {  
    alert("The age must be between numbers 12 and 100");  
    Submitted = "false";
}
if (at == -1) {  
    alert("The email address you entered is not valid"); 
    Submitted = "false";
}
if (Submitted == "false") {  
    return false;
}

اگر روی دکمه Try it Live کلیک کنید ، خواهید دید که قسمت ورودی متن شامل یک لیست کشویی است:

var sampleList = document.getElementById("sampleList");
document.getElementById("favoriteElem").value = sampleList.options[sampleList.selectedIndex].text;

این مثال نوع متفاوتی از لیست کشویی را در قسمت ورودی متن نشان می دهد. خودتان ببینید و مقایسه کنید:

var none = document.getElementById("none");
var option = none.options[none.selectedIndex].text;   
var sampleText = document.getElementById("resultElem").value;
sampleText = sampleText + option;   
document.getElementById("resultElem").value = txt;

اکنون ، مثال زیر نشان می دهد که تفاوت مقدار پیش فرض و ویژگی چه تفاوتی دارد:

var textVal = document.getElementById("sampleText");
var defaultTextVal = textVal.defaultValue;
var currentTextVal = textVal.value;