Prevent text selection from exiting a div - javascript

I have a div that displays some text that the user might want to highlight to copy and paste or the like. While kicking the tires of that design, I noticed it was easy to end up selecting content beyond that div simply by dragging the mouse too far. I'd like to avoid this issue by preventing the selection from leaving the relevant div, but I haven't been able to find any way to do it.
One possible solution might be applying user-select:none (as described here) everywhere but that particular div, but that won't work in this case because there are other divs which need to have selectable text.
Conceivably jQuery could be used to change div styles so that user-select:none would apply to everything but the div you're selecting text in, but I feel like there has to be a simpler way to go about it, possibly even with just CSS.
Anyone know how to do this?
Edit: Josh C's answer below does the trick. Here's a JS fiddle fork of his solution, with the most important change in the fork being the addition of the disabled="disabled" attribute to the textarea. When selecting text within the textarea while using that attribute, no caret will appear in the text and the outline will not glow when focus is on the textarea. The only other thing to note is that you'll have to control textarea browser defaults if you want to obscure the fact that the text is in a textarea.

You could achieve this with jQuery, however, the easiest and most lightweight option I know of would just be to do what companies like Google have always done:
Place the text that is going to be highlighted inside an input or textarea box.
Demo here
<textarea>Text that will be highlighted here..</textarea>
If you want it to be somewhat hidden, set border:none;
textarea {
border:none;
width:400px
resize:none;
}
If you want to embed maps from Google, Youtube videos, or a facebook feed, all these companies use this approach. I'm pretty sure this is your best option.
If you want the text to be auto selected on click, use some JS like:
function SelectAll(id) {
document.getElementById(id).focus();
document.getElementById(id).select();
}

Seems like you might want to be able to click on this div and copy it's text contents to your clipboard.
Here is a stackOverflow about copying to clipboard.
The best explanation was here.

I just wanted to include my snippet here.
My focus was on making sure that I could display header and paragraph text without the text area styles bleeding through. I also prefer to use attribute selectors for this sort of css tom-foolery.
[selectable-text]{
padding: 0;
width:100%;
border: none;
resize:none;
background:none;
font-size:inherit;
font-family:inherit;
font-weight:inherit;
color: inherit;
}
<h1>
<textarea selectable-text disabled="disabled" rows=1 >Soldering Iron 110v</textarea>
</h1>
<p>
<textarea selectable-text disabled="disabled" rows=1 >This is a fine soldering iron.</textarea>
</p>
<h1>Soldering Iron 110v</h1>
<p>This is a fine soldering iron.</p>

Related

Adjusting Field Height Dynamically With CSS

I have a textarea field, which I would like to automatically adjust according to number of lines used (i.e., if the user enters one line, the field height will show that line only, but if the user enters a long text, the field will show all the lines of text).
I would like it to happen dynamically, without using scroll (overflow).
I would appreciate help with this.
thanks
There are lots of ideas given in the answers pointed to in the comments so if you absolutely have to stick with textarea perhaps some of them will solve your problem but they require Javascript and I notice you have tagged CSS not JS.
So, have you considered using a contenteditable div instead? This will automatically resize depending on content without needing Javascript:
.input {
overflow: auto;
border: 1px solid black;
}
<div class="input" contenteditable></div>

Hide the caret in an HTML texbox

So, this is a design decision that many of you may find odd. I would like to hide the caret from appearing in a textbox on a webpage but I want the textbox to remain active.
I was surprised to find that CSS does not actually offer any functionality for custom carets, admittedly it's nothing I've ever had the need for in the past but I thought that surely I wouldn't be the first to want to do this.
The best way for me to explain what I have done is by my showing you the website. www.hududandescape.com
As you can see, I have created my own custom caret which just blinks at the end of the text box that has been styled to blend in with the background. The textbox always keeps focus so there is no risk of users not being able to type in it.
My issue is that the caret that comes with the text box is still blinking. I have fixed this in Chrome and Safari by putting a small black box over the top of the very end of the box, thus covering up the caret. This solution is not ideal however and it does not work in Firefox or IE.
Your solutions, no matter how creative, are highly welcomed :)
Andy
I'm not sure, but try something like this. Idea is simple, i think you'll understand reading the code
<style>
input#top {
width:0px;
border: none;
}
#show-input{
border:1px solid #000;
width: 100px;
height: 25px;
}
</style>
<input id='top' /> <!-- 'hidden' -->
<div id='show-input' ></div> <!-- show input -->
<script>$(function(){
$("#show-input" ).click(function(){
$("#top").focus();
});
$("#top").keyup(
function(){
$("#show-input").html($(this).val())
})
})
</script>

hand cursor css on the selected text IE8

i have a problem of hand cursor i m currently selecting the text and highlighting it but problem is i want a hand cursor on the highlighting text
here is the running code of the problem any suggestion
http://jsfiddle.net/8mdX4/135/
and i want to run it in the IE8
Add a CSS rule in your example:
​span {
cursor: pointer;
}​
This will enable the hand-cursor on the generated span element on the page. Preferrabally you'd add an extra class to the generated span so not all span elements get the hand cursor. then you can add that class to the css like:
​span.highlight {
cursor: pointer;
}​
That is not possible using execCommand() as it does not support it. An alternative would be wrap the selected text in <span> tag and set the css property for it but it becomes PITA if you have html tags into your text.
Nonetheless, this might help you:
Inserting string at position x of another string
use this
style="cursor:pointer"

Show just particular parts of website - select via CSS?

what would be the easiest method to display only specific elements on a website?
For example, on a news site only the headlines and nothing else.
I'd like to select elements via CSS so only those should be displayed.
I tried to use the :not pseudoclass:
:not(.myClass) { display: none; }
But obviously, the parents of the .myClass-elements aren't displayed and so aren't them.
Do you know any possibility to achieve this? It doesn't have to be CSS-only, Javascript is possible too.
A web-app that does this would also be great.
I'd like to be able to filter some sites I visit, so I would apply this as a user-stylesheet.
You can load the page with jQuery and easily select the elements you want...
$("body").load("path/to/page.html div.headline");
The above will load all <div class="headline"> elements into the body of the document.
Note: You will of course have to keep the same origin policy in mind.
If you want to show only the news headline you will need to structure your HTML correctly. If you have a container div the easiest way to do this would be to apply a secondary class to it and show/hide elements trough that class:
<div class="container news_page">
<h1>Title</h1>
<p>Random text I want to hide.<p>
<div class="random_container">Another random element i want to hide.</div>
</div>
.container {border:1px solid red;} /* .container has normal styling */
.news_page p, .news_page .random_container {display:none;} /* .news_page is used only to select elements inside container on news page */
This would be the css only solution to this.
I can't figure out how to comment on things, so as a response to the last answer's last comment, check this out: http://selectivizr.com/. It says it can emulate CSS3 selectors for IE, so maybe that will fix your problems with Exploder...

Delete text from copied text

I would like to use JavaScript to clean up text that’s being copied from my site.
I use snippets like this:
body {
vertical-align: middle; ➊
}
Where ➊ indicates comment later on. I want readers to copy this snippet and use it – so I need to delete that Unicode marker. How can I access text that’s being copied and make changes to it?
I considered deleting marker(s) from snippet when user clicks (mousedown) on it, so she could select the text, copy it and then I would restore markers but it seems a really long way to do it.
Just put the unicode markers in span tags, and put display none on them when the user clicks
body {
vertical-align: middle; <span class="marker">➊</span>
}
And then do this in jQuery
$('.code')
.mousedown(function() {
$(this).find('.marker').css('display','none');
})
.mouseleave(function() {
$(this).find('.marker').css('display','inline');
});
As a bonus, you could then apply the following style to the .marker elements:
​.marker
{
position:absolute;
right:0;
}​
You could turn the unicode marker into an image, as images are ignored when copying plain text.
just set the markers in comment? so it doesn't do any harm when being used after copying
There is an oncopy handler, but I doubt it is widely supported. There are also selection event handlers like onselectstart (again, different for different browsers) and various attributes to make a part of the text unselectable, like -moz-user-select: none (yet again, not cross-browser). You are probably better of using absolutely positioned markers or making the marker unaccessible through z-index.

Categories