2012-05-05 3 views
4

자리 표시 자에 문제가 있습니다. 입력 필드에 값을 스타일링 할 수 있지만 그 값의 스타일 단어를 다른 방식으로 표시 할 수 있는지 묻고 싶습니다. 우리는 초기 값을 나가 "First"위한 green color"Name"위한 red color 가지고 싶어 "First Name"가 입력 필드가있는 경우값/자리 표시 자 - 단어의 다른 스타일링

예를 들어, (이 단지 예이다).

최근에이 문제를 만났지만이 문제를 피하고 하나의 스타일로 스타일을 지정했습니다. 하지만 지금은 다른 프로젝트에서 일하고 있으며 같은 문제가 있습니다.

가능한지 알고 싶습니다.

참고 : ie 때문에 자리 표시 자 html 속성 대신 "자리 표시 자"로 값을 사용합니다.

<input type="text" value="First Name" onFocus="if (this.value == 'First Name') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'First Name';}" /> 

TNX

+0

나는 원하는 효과에 대한 큰 대안을 보았다. 기본적으로 입력 상자는 텍스트가 투명한 글꼴 (모두 비어 있음)을 사용하는 최상위 레이어에 있고, 그 뒤에 텍스트 영역은 자바 스크립트를 통해 값 변경시 업데이트되는 사용자 정의 구문으로 채워집니다. 그건 상당히 해결 방법이며, iOS에서 작동하지 않습니다. (i가 정확하게 호출 한 경우 ...) 또는 리치 텍스트 에디터를 얻을 수는 있지만 사용자 이름 입력과 같은 과부하 일 수 있습니다. – PicoCreator

+0

이 양식에 대한 입력 필드가 여러 개 있습니다. 따라서 한 가지 스타일을 다시 사용하게됩니다. (이렇게 보이는 것이 가장 좋습니다.) 감사합니다 ... – cool

+0

처음에는 항상 서로 다른 스타일을 사용할 수 있습니다. 성 필드 = P 그리고 stackoverflow에 오신 것을 환영합니다. 언제든지 물어보고 배우십시오. – PicoCreator

답변

3

불행하게도 그 수는 없습니다. 이 양식 요소를 스타일링 할 때, 많은 장애물이있다, 색상 요소의하지 chracters로 설정할 수 있습니다,이 시도 :

http://jsfiddle.net/Fgd2e/1/

+0

좋은 예 ... tnx, 이것은 많은 도움이 될 수 있습니다 .. – cool

+0

@cool 당신은 환영합니다. :) 그랬 더라면 CSS 스타일을 위해 js로 놀지 않고 클래스를 사용하는 것이 더 낫고, 'addClass''removeClass' 메소드를 사용하는 것이 더 좋습니다. – undefined

+0

아마 다른 스타일에 대해 다른 스타일을 구현해야하는 입력 필드가 너무 많지 않기 때문에 하나의 스타일을 다시 사용할 것입니다. 그러나이 솔루션은 정말 훌륭하고 이것을 구현하는 방법에 대한 많은 의구심을 제거합니다 ... tnx – cool

0

당신은 color 스타일 속성을 사용하여 입력의 색상을 변경할 수 있습니다 . 각 단어마다 색을 구분하는 것이 훨씬 더 어렵습니다. 올바른 색상을 표시하는 오버레이가 있어야합니다. 게다가 커서가 사라져 사용자가 현재 어디에 있는지 알 수 없게됩니다.

+0

나는 .... 그렇다. 나는 모든 (대부분의) 브라우저에서 작동해야하기 때문에 그 하드, expecialy를 알고있다 ... tnx :) – cool