Requirement is to make the placeholder text different for mobile as well as desktop.
Example:
The placeholder that need to show in the mobile device is “” and in the desktop need to be “”. For that first get the screen width in the JavaScript file and pass that value to ‘getcontext’ and then update the template file.
In the below example the placeholder value will be showing as “Phone” for the screen width greater than 768px and will show as “Phone Number” for the screen width lesser than 768px.
// javascript....'getcontext' of view
getContext: function getContext() {
var screen_width = Utils.getViewportWidth();
var showmobiletext;
console.log("screen_width", screen_width)
if (screen_width > 768) {
showmobiletext = true;
} else {
showmobiletext = false;
}
}
return {
showmobiletext: showmobiletext
};
Template
<div class="contact-us-form-controls" data-validation="control">
<input type="text" name="custevent_ag_sample_item_phone"
id="custevent_ag_sample_item_phone"
class="contact-us-form-input <div class="contact-us-form-controls" data-validation="control">
<input type="text" name="custevent_ag_sample_item_phone"
id="custevent_ag_sample_item_phone"
class="contact-us-form-input custevent_ag_sample_item_phone" value="" minlength="7"
placeholder="{{#if showmobiletext}} {{translate 'Phone *'}} {{else}}{{translate 'Phone Number *'}} {{/if}}"></input>
</div>