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
215 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
215 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
213 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

Günlük Film Tavsiyesi