ActionScript
TypeScript
JavaScript

TextInput的文本输入限制&禁止编辑

发布时间:2017-03-10

        在我们实际编码的过程中,文本输入框的内容很多时候是要被限制的,不限制的话会不符合数据库规定的类型。而且文本框限制了输入也可以减少用户误操作输入的非法字符,保证了程序的稳定性。

      Laya.ui.textInput 中所使用的 API参数:

blob.png

(function()
{
	var Input    = Laya.Input;
	(function()
	{
		// 不支持WebGL时自动切换至Canvas
		Laya.init(1136, 640);
		createText1 ();
	})();


	function createText1()
	{
    var textInput = new Input();//创建一个 TextInput 类的实例对象 textInput 
            textInput.fontSize = 30;//设置 textInput 的字体大小。
            textInput.wordWrap = true;//设置 textInput 的文本自动换行。
            textInput.restrict = "a-z" + "0-9";//设置textInput的文本输入限制
            textInput.x = 100;//设置 textInput 对象的属性 x 的值,用于控制 textInput 对象的显示位置。
            textInput.y = 100;//设置 textInput 对象的属性 y 的值,用于控制 textInput 对象的显示位置。
            textInput.width = 300;//设置 textInput 的宽度。
            textInput.height = 200;//设置 textInput 的高度。
            Laya.stage.addChild(textInput);//将 textInput 添加到显示列表。
	}


})();

示例效果(输入中文前):

blob.png

空格输入中文后:

blob.png

我们在这个示例中限制了输入了数字0-9和小写的英文字母a-z,想要输入中文或者大写的英文字母是不行的,如果有兴趣的可以修改 textInput.restrict 中的设置,去实现自己想要限制的字符。

blob.png

我们不光可以限制输入的字符类型,我们还可以限制输入的长度,限制用户输入过长的信息存储起来消耗更多的资源

	textInput.maxChars = 10;//设置textInput的文本输入最大值

blob.png

这里我们看到输入到10个字符的时候就不能继续输入了,maxChars成功限制了我们输入的长度。


在我们有些时候不想用户在文本框内输入信息的时候就可以设置textInput.editable = false ,这样用户就不能在这个文本框内输入了。


但是editable只能作用在浏览器中,在手机端显示的时候无论你设置的是true还是false都是可以输入的,所以如果在手机端上不想让用户输入可以使用label或者textArea来显示文本内容。image.png

在上一个示例的代码中添加禁止编辑

textInput.editable = false;//设置文本的编辑状态。

image.png

在浏览器中我们就不可以再输入任何内容了。