CSS 텍스트에만 적용되는 텍스트 상자의 배경색

두 개의 텍스트 상자가 서로 겹쳐 있습니다. 첫 번째 텍스트 상자 'TextBox1'은 사용자 입력에 의해 정의됩니다. 두 번째 'TextBox2'는 자동 완성 기능으로 채워집니다. 내 목표는 첫 번째 텍스트 상자의 배경을 흰색으로 만 입력 한 텍스트에 대해 결과 'TextBox2'가 반환되는 계정 이름의 나머지 부분 만 표시하도록하는 것입니다.CSS 텍스트에만 적용되는 텍스트 상자의 배경색

예 : 사용자 유형이 "ut tr"이고 'TextBox2'에 저장되는 자동 완성은 'UT 교육'이됩니다. 나는 각 단어의 첫 글자를 대문자로 변환하는 텍스트를 가지고 있으므로 변형 후 (사용자 유형으로) "Ut Tr".

입력이 'TextBox2'에있는 결과와 겹치면 두 문자는 대소 문자의 차이 때문에 일치하지 않습니다. 이것은 다른 예에서 주요한 화장품 문제를 일으킬 수 있습니다.

그래서 'TextBox1'입력 텍스트 상자의 텍스트 배경이 흰색이면 사용자가 입력 한 내용과 나머지 자동 완성 만 볼 수 있습니다.

도움 주셔서 감사합니다. 이것은 첫 번째 게시물이기 때문에 아무 것도 모르는 사이에 금기를했다면 사과드립니다. 여기

이 보이는 방법을 보여주는 비디오에 대한 링크입니다 : http://screencast.com/t/ef6dBJyU2X14

출처

2012-08-09 CVetter

이것은 자동 완성에 대한 흥미로운 접근법입니다. 개인적으로는 버그가있는 경향이 있지만, 시원한 아이디어를 위해 upvoted입니다. – diracdeltafunk

귀하의 질문에 대해 조금 불명확합니다. – Faust

내가 발견 한 바로는 CSS의 배경색 속성이 전체 요소에 적용됩니다. 요소 내에서 스팬을 만들 때 우연히 발견되었지만 텍스트 상자에서이를 수행하는 방법을 모르거나 내 문제를 해결하기에 충분하면 – CVetter

이제 비슷한에 의해, 사용자에 의해 입력되는 문자 수를 확인할 수 있습니다

$('#myInput').on('keydown', function() { 
    inputLength = $(this).val().length 
});

그리고 그 후 자동 완성에서 첫 번째 N = inputLength 자의 색을 흰색으로 변경하십시오. 아마도 하위 문자열을 사용하는 것입니다 :

substring(0, inputLength);

출처

2012-08-09 17:38:36

나는 배경색을 적용 할 것이라고 확신합니다. 텍스트 상자의 전체 너비 때문에 'TextBox2'를 덮습니다. 현재 두 텍스트 상자의 배경색은 투명하므로 텍스트가 겹쳐지면 둘 다 표시됩니다. 'TextBox1의 텍스트가 검은 색이어서 사용자에게 녹색 텍스트가있는'TextBox2 '위에 표시됩니다. – CVetter

불합리하게 복잡한 구조가있는 것 같습니다. 당신이 정확히 무엇을 달성하기를 원하는지 명확하게 말할 수 있습니까? 그렇다면 해결책을 제시하는 것이 가능할 것입니다. –

다음은 현재까지 보이는 비디오입니다. [link] (http://screencast.com/t/ef6dBJyU2X14) text-transform : capitalize는 대부분의 문제를 처리하지만 전부는 아닙니다. 그들이 입력 한 내용을 사용자 입력이 변경되지 않도록하고 싶습니다. 이유는 무엇입니까? – CVetter

입력에 클래스를 추가하고 해당 스타일에 CSS 스타일을 적용 할 수 있습니다.

Here

.someclass{ 
    color:#FFF; 
    background-color:#FFF; 
    border: solid 1px #000; 
} 
<input type="text" class="someclass">

는 작업 라이브 데모입니다.

출처

2012-08-10 13:51:54

CSS 텍스트에만 적용되는 텍스트 상자의 배경색

답변

관련 문제