Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.
Comentário: DI-2804

Função

O componente Entrada de texto flutuante é utilizado quando se quer obter dados de entrada. Esse componente se diferencia dos demais por exibir o título somente quando o usuário começa a digitar o conteúdo no campo.


Image RemovedImage Added

Animação 1 - Exemplo do componente e seus 2 estados: antes e depois de inserir o texto

Principais propriedades

Propriedades

Na tabela abaixo estão descritas as principais propriedades do componente.

Nome

Propriedade

Função

ConteúdoTítulo

content

Texto que será exibido no título do campo quando o usuário inserir o texto.

Valor

ng-model

Propriedade AngularJS Angular que pode ser usada para obter e alimentar o conteúdo pelo bloco de programação.

Tipo

type

Propriedade usada para definir o tipo de entrada dos dados, exemplo: como data, financeiromoeda, e-mail e , entre outros. (valor padrão: text)O tipo padrão é 'Texto'. Algumas dessas opções influenciam a forma como o componente será exibido. O tratamento de máscaras não deve ser feito nesse campo. Embora seja possível escrever no campo, o usuário deve se limitar a selecionar uma das opções disponíveis na lista específica do campo.

Sugestão

placeholder

Exibe um exemplo de resposta para o usuário quando o campo está vazio. Para esse componente, normalmente essa propriedade contém o mesmo texto da propriedade Conteúdo.

Máscara

mask

Propriedade de máscara aplicado ao campo de entrada de texto. Ver mais em Máscaras HTML Formatação de máscaras na camada cliente.

Sugestão de Máscara

mask-placeholder

Exibe um exemplo de resposta no momento que o usuário insere os dados, os caracteres são substituídos à medida que o usuário digita.
Essa propriedade só deve ser utilizada em campos do tipo texto usando máscaras de CPF, CNPJ, telefone e outras.

Tipo de Teclado

keyboard

Específica qual será o tipo de teclado que será exibido no Smartphone do usuário quando esse campo for utilizado.

Tamanho mínimong-minlength

Diretiva que adiciona uma restrição em um campo de texto e uma validação em um formulário caso o número mínimo de caracteres não seja atingido.


Máximo de caracteresng-maxlength

Diretiva que adiciona uma restrição em um campo de texto e uma validação em um formulário caso ultrapasse o número máximo de caracteres.


Identificador

id

Atributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente.

Exibir

ng-show

Propriedade AngularJS Angular usada para mostrar ou oculta o componente.

Segurança

cronapp-security

Propriedade do Cronapp que trata as permissões de segurança da aplicação. Usado para permitir ou não edição e visualização do componente com base nos perfis selecionados.

Skincrn-skinPermite selecionar um skin que afetará apenas o componente selecionado.

Classes CSS

class

Adiciona classes CSS que já foram criadas.


Eventos

Na tabela abaixo estão descritos os principais eventos do componente.

NomePropriedadeFunção
Apertar Teclang-keydown

Executa uma ação assim que uma tecla é acionada no teclado.

Ao Soltar Teclang-keyup

Executa uma ação ao soltar uma tecla do teclado.

Ao clicarng-click

Executa uma ação quando o componente receber um clique com o mouse ou um toque na tela.

Ao Clique Duplo Rápidoon-double-tap

Executa uma ação sempre que um elemento é clicado duas vezes

Ao Focarng-focus

Executa uma ação assim que o componente é focado.

Ao Sair do Focong-bur

Executa uma ação assim que o componente sai do foco.

Ao Pressionarng-hold

Executa uma ação sempre que um elemento é pressionado sem soltar por alguns milissegundos.

Ao Deslizarng-swipe

Executa uma ação sempre que é feito uma ação de swipe no elemento.

Ao Arrastaron-drag

Executa uma ação sempre que um elemento é arrastado.


Estilos

Na tabela abaixo estão descritos os tipos de estilos disponíveis para o componente.

Nome em português

Nome em inglês

Descrição

Título

Title

Estiliza o título do componente.

Entrada de texto

Input

Estiliza a entrada de texto do componente.

Sugestão 

Placeholder

Estiliza a sugestão de escrita do componente.

Propriedades do subcomponente input

As propriedades abaixo não são nativas do componente. Para adicionar essas ou outras propriedades, será necessário selecionar o  subcomponente inputsubcomponente input, desagrupando o componente principal  e inserindo, na propriedade Nova propriedade, uma das propriedades abaixo, como mostra a figura 2.

Nome

Propriedade

Função

Tamanho máximomaxlength

Define o número máximo de caracteres aceito no campo.

Algumas máscaras possuem caracteres que ocupam espaços, dessa forma, ao informar o número máximo de caracteres nesta propriedade, leve em consideração a quantidade de caracteres utilizados pela máscara.
Ex,: Um CPF possui 11 dígitos, porém mais 3 caracteres são exibidos ao utilizar a máscara CPF (2 "." e 1 "-"). Sendo necessário informar o valor 14 nessa propriedade.

Tamanho mínimominlength

Define o número mínimo de caracteres aceito no campo. A linha do campo ficará em vermelho até que o usuário digite o mínimo de caracteres necessários.

Algumas máscaras possuem caracteres que ocupam espaços, dessa forma, ao informar o número mínimo de caracteres nesta propriedade, leve em consideração a quantidade de caracteres utilizados pela máscara.
Ex,: Um CPF possui 11 dígitos, porém mais 3 caracteres são exibidos ao utilizar a máscara CPF (2 "." e 1 "-"). Sendo necessário informar o valor 14 nessa propriedade.

Apenas leiturang-readonly

Bloqueia edições no campo e exibe seu conteúdo apenas para leitura. Por padrão, possui as opções "Sim" e "Não".

Essa propriedade também aceita expressões, permitindo por exemplo, bloquear um campo vinculado a um uma fonte de dados:

  • "datasource.editing" para bloquear o campo quando a fonte de dados estiver em modo de edição ou
  • "datasource.editing || datasource.inserting" para bloquear o campo quando a fonte de dados estiver em modo de edição ou inserção.

Âncora
subcomponentes
subcomponentes

Subcomponentes

O componente Entrada de texto em linha flutuante é formado por dois subcomponentes agrupados:   span e input.  Ao Ao clicar no botão bolha com ícone de cadeado (Figura 1) o componente é desbloqueado, permitindo a seleção de seus subcomponentes. Para inserir uma das propriedades mostradas na tabela acima, acesse a propriedade Nova propriedade (destaque 1 da Figura 2).

Informações
titleDica

Consulte o tópico "Acesso aos subcomponentes" da documentação Componentes visuais para  para mais informações.


Image RemovedImage Added

Figura 1 2 - Desagrupar componente para acessar subcomponentes

Nome em inglês

Float Input


Nesta página

Índice
maxLevel3
printablefalse

Compatibilidade

  • Formulário mobile


Equivalente web

Não possui.


Botão do Componente

Image RemovedImage Added

Imagem no Editor Visual

Image Removed

Image Added