Converter txtInput para Maiúscula

1 de dezembro de 2011 5 respostas

Ramon.Onix 1 de dezembro de 2011

Ontem passei um tempo quebrando cabeça, tentando resolver o seguinte:
Tenho uns textInput e tinha que converter o texto digitado e assim que for digitado para Maiúscula.
Me sugeriram colocar o restrict="A-Z0-9" mas isso só restringe a digitação de minuscula, ou seja vc teria de ligar o capslook e não seria a melhor solução.

Encontrei algumas coisas sque me ajudaram a desenvolver o que queria e é bem simples.

classe MinusculaParaMaiuscula

//tenho um pacote "util" onde coloco o que todos já sabem.
package utill
{
	import spark.components.TextInput;

	public class MinusculaParaMaiuscula{
		//construtor
		public function MinusculaParaMaiuscula(){
		}

                //metodo de conversão
		public function MinParaMai(campo:TextInput):void{
			var strCampo:String = campo.text;
			campo.text = strCampo.toUpperCase();
               //não sei pq mas o meu não posicionava no final do textinput e se eu digitasse "porta" ficava "ATROP", emfim, resolvi com isso
			campo.selectRange(campo.text.length, campo.text.length);//posiciona o cursor no final do textinput
		}
			
	}
}

Depois eu instancio e uso no textinput

cp_registro.as [pacote acs, onde coloco todos os .as]

import utill.MinusculaParaMaiuscula;
var conversor:MinusculaParaMaiuscula = new MinusculaParaMaiuscula();

cp_registro.mxml

<s:TextInput id="txt_nome" x="50" y="26" width="266" height="20" fontSize="10" change="conversor.MinParaMai(txt_nome)"/>
<s:TextInput id="txt_conv" x="377" y="26" width="200" height="20" fontSize="10" change="conversor.MinParaMai(txt_conv)"/>

do jeito que está só preciso instanciar em cada .as pra usar no .mxml

Coloquei aqui pq alguém poderá precisar. Aceito melhorias!
até+

5 Respostas

CristianPalmaSola10 1 de dez. de 2011

Sugiro para voce criar um componente personalizado para isso
estou desenvolvendo este componete vou te passar o codigo

&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;mx:TextInput xmlns:fx="http://ns.adobe.com/mxml/2009" 
			  xmlns:s="library://ns.adobe.com/flex/spark" 
			  xmlns:mx="library://ns.adobe.com/flex/mx"
			  width="200"
			  creationComplete="initComp()"&gt;
	
	&lt;!--
	@author Cristian Elder Urbainski 
	@since 01/12/2011
	--&gt;
	
	&lt;fx:Script&gt;
		&lt;![CDATA[
			import mx.binding.utils.ChangeWatcher;
			import mx.validators.Validator;
			import mx.controls.Alert;
			import mx.utils.OnDemandEventDispatcher;
			import mx.validators.StringValidator;

			private var _textTransform : String;
			private var _onlyNumer : Boolean;
			private var _number : String = "[telefone removido]";

			
			private function initComp() : void {
				this.addEventListener(Event.CHANGE, aplicarTextTransform);
			}
				
			private function validarOnlyNumber() : void {
				if(_number.indexOf(this.text.substring(this.text.length - 1, this.text.length)) &gt;&lt; 0){
					this.text = this.text.substring(0, this.text.length - 1);
				}
			}
			
			private function aplicarTextTransform(event : Event) : void {
				if(_textTransform == "lower") {
					this.text = this.text.toLowerCase();
				} else if (_textTransform == "upper") {
					this.text =	this.text.toUpperCase();
				}
				
				if(_onlyNumer){
					validarOnlyNumber();
				}
			}
			
			public function get textTransform() : String {
				return _textTransform;
			}
			
			[Inspectable(enumeration="upper,lower,ignore", defaultValue="ignore")]
			public function set textTransform(str : String) : void {
				this._textTransform = str;
			}
			
			public function get onlyNumber() : Boolean {
				return _onlyNumer;
			}
			
			[Inspectable(category="Properties", enumeration="true,false", defaultValue="false")]
			public function set onlyNumer(value : Boolean) : void {
				this._onlyNumer = value;
			}
			
			public function get required() : Boolean {
				return _required;
			}
			
			[Inspectable(category="Properties", enumeration="true,false", defaultValue="false")]
			public function set required(value : Boolean) : void {
				this._required = value;
			}
		]]&gt;
	&lt;/fx:Script&gt;
	
&lt;/mx:TextInput&gt;

tudo o que voce tem q fazer é passar para o componente na propriedade textTransform upper, lowe ou ignore (ignore é o default do componente), e pronto o componente formata o texto para vc

e tem tambem a propriedade onlyNumber default false, se vc passar ela true, o campo passa a aceitar apenas numeros

ate mais espero ter ajudade

andre07041989 1 de dez. de 2011

Pessoal gostei dos dois exemplos, mas de na real este negócio de customizar componente é complicado e as vezes gera muita dor de cabeça, não
digo que não seja uma boa, mas sinceramente tenho tido vários problemas com componentes customizados por isto estou falando para vc CristianPalmaSola10.
As vezes é melhor usar a nativa. Mas lembrando meu ponto de vista.
Mas os dois assuntos são muito interessantes.
Flw!!!

CristianPalmaSola10 1 de dez. de 2011

Sim conocordo que usar nativo em certas situações é melhor, mas neste casso para conversao de texto eu acho melhor pq se nuam teria que fazer como nossa amigo fez toda fez chama no change um metodo e tals e assim so definindo uma propriedade e o componente fazendo fica melhhor neste casso

na empresa onde trabalho como desnvolvedor há muitos componentes criados personalixados, e componentes personalizados tentem a amarar o programador, as vezes voce quer fazer uma coisa ma ai o componente vira um empecilho ao inves de um aliado, esse é o lado ruim

ate mais

andre07041989 1 de dez. de 2011

Concordo com vc!
E como disse é legal, e como vc mesmo disse além de amarrar o desenvolvedor a empresa, no caso também há a parte de erros, às vezes
me surpreendo com cada coisa.
É uma boa, mas é aquela coisa, tu pode acabar se surpreendeno e se decepcionando no futuro com os resultados ainda mais se tratando de flex.
Mas vai fundo!!

rosequadra 25 de jan. de 2012

Uma outra forma seria criar um custom como este, o que acham?

package custom {

import flash.net.URLRequest;
import flash.net.navigateToURL;
import mx.controls.TextInput;
import mx.controls.dataGridClasses.DataGridColumn;
import mx.core.UIComponent;
import mx.rpc.events.ResultEvent;

public class FuncoesBasicas {

	public static function upperCase(campo:TextInput):void {
		var strCampo:String = campo.text;
		campo.text = strCampo.toUpperCase();
	}
}
}

e na tela:

<mx:Script>
		<![CDATA[
			import custom.FuncoesBasicas;
		]]>
	</mx:Script>

			<mx:TextInput x="99" y="266" width="230" id="ti_nm_pessoa"
						  change="{FuncoesBasicas.upperCase(this.nm_pessoa)}" tabIndex="13"
						  height="22"/>

Espero de ter ajuda!

Criado 1 de dezembro de 2011

Ultima resposta 25 de jan. de 2012

Respostas 5

Participantes 4

5 Respostas

Topicos relacionados