Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Mazotti

Table

Por , em Desenvolvimento frontend

Recommended Posts

JCMais    75

JCMais
Postado

Como assim? Porque você deseja interferir na seleção do usuário? E deseja bloquear o tab?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

Não conunda as coisas, o 'block', valor da propriedade display é de 'bloco', não de 'bloqueio'. Pesquise sobre elementos HTML inline e block.

 

Quanto a sua dúvida, esse script funciona para IE e Firefox e PARCIALMENTE para Opera, Chrome e Safari:

<!doctype html>
<html>
<head>
	<title>Teste select</title>
	<script type="text/javascript">
		function disableSelection(target){
			// IE...
			if (typeof target.onselectstart != 'undefined') {
				target.onselectstart = function(){
					return false;
				}
			}
			// Firefox...
			else if (typeof target.style.MozUserSelect != 'undefined') { 
				target.style.MozUserSelect = "none";
			}
			// Outros...
			else {
				target.onmousedown = function(){
					return false;
				}
			}
		}
		window.onload = function() {
			disableSelection(document.getElementById('content'));
		}
	</script>
</head>
<body>
	<div id="content">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis adipiscing fringilla sem gravida malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc vehicula dignissim feugiat. Maecenas convallis porttitor dui, at luctus arcu tempor sit amet. Aliquam est tellus, sodales tristique rhoncus id, bibendum et tellus. Donec mattis ante vel enim luctus in sodales risus imperdiet. Integer leo lorem, imperdiet semper rutrum eget, vulputate sed dolor. Donec pretium libero in dolor tempus sit amet rutrum purus dictum. Pellentesque eu ligula ut mi semper vulputate eget eu sem. Ut tempus aliquam velit a congue. Donec hendrerit faucibus dui congue fermentum. Sed posuere leo quis mi eleifend pulvinar non at lacus. Duis massa est, sollicitudin in venenatis ultricies, elementum commodo purus.

Maecenas malesuada facilisis metus, rhoncus malesuada elit commodo in. Integer sodales blandit ligula, tincidunt egestas magna pulvinar ut. Integer venenatis metus a diam aliquet sagittis tincidunt nec lacus. Sed vestibulum facilisis orci consectetur dignissim. Donec placerat pretium nisi, vel eleifend ipsum ultrices sit amet. Ut iaculis ornare augue eu molestie. Donec eu urna odio. Suspendisse nec nibh eros, vitae vulputate turpis. Donec non risus ac augue suscipit tincidunt. Aliquam interdum ante a libero accumsan vel semper libero consequat. Suspendisse vel rhoncus magna. Praesent dapibus aliquam sem at adipiscing. Mauris tincidunt egestas fermentum. Sed sed eros eu justo consectetur suscipit ac ac eros.

Ut augue eros, viverra quis aliquet eu, ultricies non arcu. Mauris lobortis, nulla quis adipiscing mollis, sapien elit tristique nulla, sed condimentum ipsum arcu sed libero. Quisque congue, tellus sed fringilla aliquet, quam orci convallis lacus, in imperdiet tortor elit quis augue. Maecenas sit amet ante dolor. Maecenas quis enim vel augue consequat mattis. Mauris cursus venenatis viverra. Aliquam aliquam viverra ligula eu semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam vestibulum nibh sed est commodo sed pulvinar dui porttitor. Nulla feugiat, sapien sed dignissim molestie, massa nibh vestibulum lacus, vel congue erat enim vitae elit. Vestibulum nec quam vitae libero rutrum adipiscing ut at erat. Praesent pretium augue vitae tortor suscipit ultricies. In non diam eget nulla fringilla iaculis non vitae nunc. Duis velit sem, posuere euismod feugiat auctor, cursus sed magna. Morbi in neque quis eros placerat molestie rhoncus at est.

Nulla bibendum bibendum justo adipiscing tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet massa convallis lectus fermentum ultricies quis sit amet ante. Curabitur neque nibh, fringilla vitae rutrum in, pretium non metus. Pellentesque a nisi at orci viverra rhoncus id at sem. Vivamus adipiscing est at velit suscipit tincidunt. Sed in blandit nisl.
	</div>
	<div id="other">
		Etiam ullamcorper, augue sit amet fringilla faucibus, tortor ligula ultrices erat, blandit cursus ipsum dolor vitae velit. Duis nec augue odio, at pretium purus. Fusce sed dui ligula. In vulputate facilisis orci at ultricies. Cras facilisis nunc et sapien aliquet rutrum interdum metus faucibus. Sed tempor quam ut nibh ultricies ac accumsan sem bibendum. Vestibulum tristique cursus sapien, eu luctus dui blandit ac. Duis augue dui, faucibus at cursus ac, interdum nec enim. Sed ante nunc, aliquet in placerat in, pulvinar ac risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam magna massa, cursus dapibus dictum cursus, vulputate non risus. Curabitur sollicitudin nulla viverra libero varius in facilisis justo tincidunt. 
	</div>
</body>
</html>

 

Se o problema for apenas visual, dá pra fazer com CSS3:

		::selection {
			background:transparent;
		}

		::-moz-selection {
			background:transparent;
		}

		::-webkit-selection {
			background:transparent;
		}

 

Aí não funciona nos IE8-. Então combine as duas soluções, utilizando o javascript só para os IEs antigos.

Compartilhar este post

Link para o post
Compartilhar em outros sites

JCMais    75

JCMais
Postado

Lembrando que isso vai retirar/complicar a capacidade do usuário selecionar, e logicamente, copiar o conteúdo presente no elemento, algo que eu, como usuário, acho péssimo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

Lembrando que isso vai retirar/complicar a capacidade do usuário selecionar, e logicamente, copiar o conteúdo presente no elemento, algo que eu, como usuário, acho péssimo.

 

Só na solução Javascript, você quis dizer, não é?

No caso do CSS, apenas a cor da seleção é alterada. Ela fica transparente, mas o usuário ainda pode selecionar, copiar e colar.

O difícil vai ser ver o que ele está selecionando.

 

Sugiro que, invés de colocar transparente, utilize uma cor rbga que se harmozine com o layout.

Compartilhar este post

Link para o post
Compartilhar em outros sites

JCMais    75

JCMais
Postado

Só na solução Javascript, você quis dizer, não é?

 

A "solução" em Javascript retira a possibilidade, já a em CSS, deixando transparente a área selecionada, complica.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

JCMais:

A "solução" em Javascript retira a possibilidade, já a em CSS, deixando transparente a área selecionada, complica.

 

Henrique Barcelos:

Sugiro que, invés de colocar transparente, utilize uma cor rbga que se harmozine com o layout.

 

Bom, fica a seu critério, Mazotti...

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito