SyntaxInput

/scss/controls/syntaxinput.scss

v.0.1.0 javascript

생성 옵션

  <p><input type="text" class="syntaxInput" /></p>
  <p><input type="text" class="syntaxInput2" /></p>
  <p><input type="text" class="syntaxInput3" /></p>

  Gn.create('syntaxinput', {
    target: '.syntaxInput'
  });
  Gn.create('syntaxinput', {
    target: '.syntaxInput2',
    multiple: true,
    usetab: true
  });
  Gn.create('syntaxinput', {
    target: '.syntaxInput3',
    type: 'custom',
    patterns: {
      constant: {
        pattern: /\w+:?(?=\/)/gm
      },
      keyword: {
        pattern: /[^/]*$/gm
      }
    }
  });

name

type

default

description

target

string

colorpicker 객체 선택자(selector)

value

string

multiple

boolean

false

true 인 경우, input 대신 textarea 로 입력받는다.

usetab

boolean

false

입력창 내 TAB 키 사용 여부. multiple: true 설정 시 사용가능

readonly

boolean

false

입력 가능여부

type

string

html

syntax 타입 (plain, plaintext, text, txt, markup, html, mathml, svg, xml, ssml, atom, rss, css, clike, javascript, js)
사용자 정의 시 'custom'

onChange

function

input 값 변경 시 호출되는 이벤트

patterns

object

type 을 'custom'으로 지정 후, 패턴 형식의 Object를 설정한다.

{
  [token keyword: string] : {
    pattern: 스타일을 적용 할 패턴 정규식
  }
}

token keyword

token keyword	style
comment	comment
prolog	prolog
doctype	doctype
cdata	cdata
punctuation	punctuation
namespace	namespace
property	property
tag	tag
boolean	boolean
number	number
constant	constant
symbol	symbol
deleted	deleted
selector	selector
char	char
builtin	builtin
inserted	inserted
operator	operator
url	url
string	string
atrule	atrule
attr	attr
keyword	keyword
function	function
class	class
regex	regex
variable	variable
important	important
bold	bold
italic	italic
entity	entity

메소드

name	return	description
setValue(value: string)	void	값을 변경한다.
getValue()	string	값을 반환한다.
disable	void	Readonly 상태로 전환한다.
enable	void	Readonly 상태를 해제한다.