v2.5.2
Giriş yap

JS/JQuery ile kelime seçme

Anonim
1,269 defa görüntülendi ve 1 kişi tarafından değerlendirildi

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.

Cevap yaz
Cevaplar (3)
canpacis
1780 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.

tayfunerbilen
1781 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);
}
lafcanbazi
1782 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/