Giriş yap
JS/JQuery ile kelime seçme

Yapmak istediğim şey; 10fastfingers deki gibi, textara içindeki
kelimeleri sırasıyla yazıkça renkli olacak şekilde işaretlemek.
Anlatması biraz zor ve havada kalıyor o yüzden direkt olarak 10fastfingers.com
a bakıp anlayabilirsiniz.
Aşağıdaki input a yazdıkça yukarıdaki textarea içindeki kelime doğruluğa göre renk alacak ve en son boşluğa basıldığında diğer kelimeye geçecek.

lafcanbazi
13 gün önce

Yapmak istedigin olayin adi Search Keyword Highlighting bircok demo mevcut bununla alakali

Asagiya link birakiyorum inceleyebilirsin

https://www.the-art-of-web.com/javascript/search-highlight/

tayfunerbilen
13 gün önce

Bir örneğini yaptım, inceleyip kendine göre uyarlayabilirsin;
https://codepen.io/tayfunerbilen/pen/eYmMEPb

Html kodların;

<div class="words"></div>

<div id="result"></div>

<input type="text" id="input">

css kodların;

.words {
	border: 2px solid #aaa;
	border-radius: 20px;
	padding: 15px;
	display: flex;
	flex-wrap: wrap;
	span {
		height: 30px;
		line-height: 30px;
		padding: 0 15px;
		border-radius: 30px;
		font-size: 20px;
		margin-right: 10px;
		&.active {
			background: #eee;
		}
		&.correct {
			background: green;
			color: #fff;
		}
		&.incorrect {
			background: red;
			color: #fff;
		}
	}
}

input {
	margin-top: 20px;
	width: 400px;
	height: 40px;
	line-height: 40px;
	border-radius: 40px;
	border: 1px solid #ccc;
}

javascript kodların;

const words = ['tayfun', 'erbilen', 'prototurk', 'test', 'şeker', 'şey'];
const wordsBox = $('.words');
let input = $('#input');
let current = 0;

$.each(words, (key, word) => {
	wordsBox.append(`<span data-id='${key}'>${word}</span>`)
});

wordsBox.find('span:first').addClass('active');

input.on('keyup', function(e) {
	if (e.keyCode == 32){
		var elem = wordsBox
				.find('span')
				.eq(current);
		
		if ($.trim($(this).val()) == words[current]){
				elem
					.removeClass()
					.addClass('correct');
		} else {
			elem
				.removeClass()
				.addClass('incorrect');
		}
		current += 1;
		input.val('');
		
		if (current == words.length){
			finish();
		}
		
	}
});

function finish(){
	var correct = $('span.correct').length,
			incorrect = $('span.incorrect').length;
	$('#result').html('<b>Doğru:</b> ' + correct + '<br><b>Yanlış:</b> ' + incorrect);
}
canpacis
12 gün önce
input.on('keyup', function(e) {})

değil de

input.on('input', function(e) {})

kullanmak daha doğru olur tayfun hocam. keyCode'u da jQuery'de oninput olayıyla alamıyorusun sanırım onu da;

if (e.originalEvent.data === " ") {
    // kullanıcı boşluk tuşuna bastı
}

şu şekilde halledebilirsin.

Nasıl akıllıca soru sorulur?
Daha hızlı ve kaliteli cevaplar almak için önce nasıl soru sorulacağını bilmeniz gerekir. Eğer bilmiyorsanız bu yazı serisini okuyun.

Cevap yaz