이것은 어려운 질문이며이를 설명하기 위해 최선을 다할 것입니다.jquery comma css change
사용자가 태그에 입력 할 수있는 텍스트 입력이 있습니다.
사용자가 입력란에 'starcraft'와 같은 태그를 입력하고 쉼표 키를 누르면 쉼표 앞에있는 모든 문자 (즉, starcraft 단어)가 색상 및 배경색을 변경하도록합니다. 따라서 사용자가 태그를 입력하고 쉼표를 누르면 태그 양식으로 단어를 볼 수 있습니다.
jquery를 사용하면 어떻게 될까요?
필자가 아는 한, 텍스트 상자에서 텍스트의 일부 스타일 만 수정하는 것은 쉽지 않습니다. 그러나이 같은 것을 할 수있는 :
HTML
<span id="tags"></span><input id="enterTag" type="text" />
자바 스크립트/jQuery를
$('#enterTag').keydown(function(event) {
var tag = $(this).val();
// 188 is comma, 13 is enter
if (event.which === 188 || event.which === 13) {
if (tag) {
$('#tags').append('<span>' + tag + '</span>');
$(this).val('');
}
event.preventDefault();
}
// 8 is backspace
else if (event.which == 8) {
if (!tag) {
$('#tags span:last').remove();
event.preventDefault();
}
}
});
CSS
#tags span {
display: inline-block;
background: #6999c0;
color: #FFFFFF;
padding: 4px;
border: solid 1px #477eab;
margin-right: 4px;
}
이것은 아주 멋지다. – Sparkup
188-> 쉼표, 13-> 입력, ... (이름 없음) 목록을 어디서 찾을 수 있습니까? – Sparkup
"JavaScript 키 코드"로 검색하십시오. 이 페이지는 제가 사용했던 페이지입니다 : http://www.cambiaresearch.com/c4/702b8cd1-e5b0-42e6-83ac-25f0306e3e25/javascript-char-codes-key-codes.aspx – FishBasketGordo
이 경우 contentEditablediv을 사용해야합니다. 일반 텍스트의 덩어리는 보통 input 내에서 스타일을 지정할 수 없습니다. contentEditablediv을 작성한 다음 keypress (또는 keydown)에서 코드를 실행하여 스타일이 적용되는 범위에서 텍스트를 줄 바꿈합니다.
keypress에서 쉼표 바로 앞에있는 텍스트를 어떻게 줄 바꿈합니까? –
'textarea'도 작동합니다. – zzzzBov
@zzzzBov 어떻게 됐니? 텍스트 영역에서 텍스트 스타일을 지정할 수 있다고 생각하지 않았습니다. –
입력 텍스트 상자를 사용하는 것만으로는 불가능합니다. div/span과 입력란의 조합을 사용해야합니다. keypress 이벤트에서 필요한 태그를 동적으로 만들고 div에 추가해야합니다.
텍스트 상자에서이를 수행 할 수 없습니다. 몇 가지 방법을 사용할 수 있습니다 :
1) 숨겨진 입력 상자에 포커스를 설정하고 키 이벤트를 수신합니다. 그런 다음 DIV, SPAN 및 CSS를 사용하여 설명하는 텍스트 상자 및 동작을 시뮬레이트합니다.
2) 텍스트 상자 (쉽게)
3)이 간단한 작업이 아니다 어느 경우
을 제안 kingjiv 기술을 사용하여 아래의 강조 용어 (또는 태그)를 표시합니다.
jQuery를 사용해야합니까? – GolezTrol
아니요, 오직 선호. –