Hello, I wanted to know how can I limit the number of characters in the input field. Right now I can write infinite characters but I wanted to limit it to 25 and after that, if the user tries to type it shouldn’t type the characters. Can anyone tell me how is this possible to do?
Thanks in advance 
Do you use the input field of the page below?
https://developer.playcanvas.com/en/tutorials/ui-text-input/
If that’s the case, I think you can easily make a statement with your limit.
else if (value.length < 25) {
this._textElement.text = value;
}
@Albertos I didn’t use the above page for that. This is my code
var Input = pc.createScript('input');
Input.attributes.add('placeholder', { type : 'string' });
Input.attributes.add('type', {
type: 'string',
enum: [
{ 'Text': 'text' },
{ 'Email': 'email' },
{ 'Password': 'password' }
],
default : 'text'
});
Input.attributes.add('fontSize', { type : 'number', default : 1 });
Input.attributes.add('padding', { type : 'number', default : 1 });
Input.attributes.add('scaleUnit', {
type: 'string',
enum: [
{ 'Viewport Width': 'vw' },
{ 'Viewport Height': 'vh' },
{ 'Pixel': 'px' }
],
default : 'vw'
});
Input.attributes.add('color', { type : 'rgb' });
Input.attributes.add('fontFamily', { type : 'string', default : 'Arial, sans-serif' });
Input.attributes.add('storeValue', { type : 'boolean' });
Input.attributes.add('focusEntity', { type : 'entity' });
//HANDLES TEXT INPUT IN A TEXT BOX
Input.prototype.initialize = function() {
this.element = document.createElement('input');
this.element.placeholder = this.placeholder;
this.element.type = this.type;
this.element.style.position = 'absolute';
this.element.style.fontFamily = this.fontFamily;
this.element.style.border = '0px';
this.element.style.background = 'transparent';
this.element.style.fontSize = this.fontSize + this.scaleUnit;
this.element.style.padding = this.padding + this.scaleUnit;
this.element.style.boxSizing = 'border-box';
var color = 'rgb(' + (this.color.r * 255) + ', ' + (this.color.g * 255) + ', ' + (this.color.b * 255) + ')';
this.element.style.color = color;
this.element.style.outline = 'none';
document.body.appendChild(this.element);
//disable focus entity
if(this.focusEntity){
this.focusEntity.enabled = false;
this.element.onfocus = this.onFocus.bind(this);
this.element.onblur = this.onBlur.bind(this);
}
this.element.onchange = this.onChange.bind(this);
if(this.storeValue){
var value = window.localStorage.getItem(this.entity._guid);
if(value){
this.setValue(window.localStorage.getItem(this.entity._guid));
}
}
this.updateStyle();
this.on('state', function(self){
if(this.entity.enabled){
this.element.style.display = 'block';
}else{
this.element.style.display = 'none';
}
}, this);
};
Input.prototype.onFocus = function() {
this.focusEntity.enabled = true;
};
Input.prototype.onBlur = function() {
this.focusEntity.enabled = false;
};
Input.prototype.onChange = function() {
if(this.storeValue){
window.localStorage.setItem(this.entity._guid, this.getValue());
}
};
Input.prototype.updateStyle = function() {
if(this.entity.element.screenCorners){
var position = this.entity.element.screenCorners;
this.element.style.left = position[0].x + 'px';
this.element.style.bottom = position[0].y + 'px';
this.element.style.width = (position[2].x - position[0].x) + 'px';
this.element.style.height = (position[2].y - position[0].y) + 'px';
}
};
Input.prototype.update = function(dt) {
this.updateStyle();
};
Input.prototype.setValue = function(value) {
this.element.value = value;
};
Input.prototype.getValue = function() {
if(this.element){
return this.element.value;
}
};
I think you can do kind of the same at line 110.
Input.prototype.setValue = function(value) {
if (this.element.value.length < 25) {
this.element.value = value;
}
};
Let me know if that works, otherwise please share your project so I can check it.
Cannot share the project its private. I will try this.
This doesnt work
If you share a sample project with the input field, I will add an input limit for you later today.
I think this should work i tried what you said but in a different way
Input.prototype.onChange = function() {
if (this.storeValue) {
var inputValue = this.getValue();
if (inputValue.length > 25) {
inputValue = inputValue.substring(0, 25); // Truncate the input to 25 characters
this.setValue(inputValue); // Update the input field with the truncated value
}
window.localStorage.setItem(this.entity._guid, inputValue);
}
};
i added these lines in my onChange function.
This code actually works but the only thing not working is when I type these things in the input field it goes up to infinite but if I press submit after typing it only takes 25 characters. So how can I solve that input field thing? @Albertos
Then probably it’s the wrong place to add your code. Maybe you can try to do the same in the setValue function?
okay
Great! Can you please share your solution so it can help other users as well?
1 Like
@Albertos Here is my updated code it works 100% I have hardcoded the max character but we can declare a public variable to access it from the inspector and use it inside the script. Here is my whole code.
I have just added a onInput Function and event listener.
var Input = pc.createScript('input');
Input.attributes.add('placeholder', { type : 'string' });
Input.attributes.add('type', {
type: 'string',
enum: [
{ 'Text': 'text' },
{ 'Email': 'email' },
{ 'Password': 'password' }
],
default : 'text'
});
Input.attributes.add('fontSize', { type : 'number', default : 1 });
Input.attributes.add('padding', { type : 'number', default : 1 });
Input.attributes.add('scaleUnit', {
type: 'string',
enum: [
{ 'Viewport Width': 'vw' },
{ 'Viewport Height': 'vh' },
{ 'Pixel': 'px' }
],
default : 'vw'
});
Input.attributes.add('color', { type : 'rgb' });
Input.attributes.add('fontFamily', { type : 'string', default : 'Arial, sans-serif' });
Input.attributes.add('storeValue', { type : 'boolean' });
Input.attributes.add('focusEntity', { type : 'entity' });
//HANDLES TEXT INPUT IN A TEXT BOX
Input.prototype.initialize = function() {
this.element = document.createElement('input');
this.element.placeholder = this.placeholder;
this.element.type = this.type;
this.element.style.position = 'absolute';
this.element.style.fontFamily = this.fontFamily;
this.element.style.border = '0px';
this.element.style.background = 'transparent';
this.element.style.fontSize = this.fontSize + this.scaleUnit;
this.element.style.padding = this.padding + this.scaleUnit;
this.element.style.boxSizing = 'border-box';
var color = 'rgb(' + (this.color.r * 255) + ', ' + (this.color.g * 255) + ', ' + (this.color.b * 255) + ')';
this.element.style.color = color;
this.element.style.outline = 'none';
document.body.appendChild(this.element);
// Add an event listener for input
this.element.addEventListener('input', this.onInput.bind(this));
//disable focus entity
if(this.focusEntity){
this.focusEntity.enabled = false;
this.element.onfocus = this.onFocus.bind(this);
this.element.onblur = this.onBlur.bind(this);
}
this.element.onchange = this.onChange.bind(this);
if(this.storeValue){
var value = window.localStorage.getItem(this.entity._guid);
if(value){
this.setValue(window.localStorage.getItem(this.entity._guid));
}
}
this.updateStyle();
this.on('state', function(self){
if(this.entity.enabled){
this.element.style.display = 'block';
}else{
this.element.style.display = 'none';
}
}, this);
};
Input.prototype.onInput = function() {
// Check the input length and truncate if it exceeds 25 characters
if (this.element.value.length > 8) {
this.element.value = this.element.value.substring(0, 8); // Truncate the input
}
};
Input.prototype.onFocus = function() {
this.focusEntity.enabled = true;
};
Input.prototype.onBlur = function() {
this.focusEntity.enabled = false;
};
Input.prototype.onChange = function() {
if(this.storeValue){
window.localStorage.setItem(this.entity._guid, this.getValue());
}
};
Input.prototype.updateStyle = function() {
if(this.entity.element.screenCorners){
var position = this.entity.element.screenCorners;
this.element.style.left = position[0].x + 'px';
this.element.style.bottom = position[0].y + 'px';
this.element.style.width = (position[2].x - position[0].x) + 'px';
this.element.style.height = (position[2].y - position[0].y) + 'px';
}
};
Input.prototype.update = function(dt) {
this.updateStyle();
};
Input.prototype.setValue = function(value) {
this.element.value = value;
};
Input.prototype.getValue = function() {
if(this.element){
return this.element.value;
}
};
My hierarchy looks like this:
1 Like