Hide the caret in an HTML texbox - javascript

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>

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>

Caret position is way off in contenteditable div

Chrome (and maybe other browsers) position the caret in a strange way within a contenteditable div.
Please consider the following snippet:
<div contenteditable="true" style="width: 100%; height: 200px; border: 1px solid black; overflow: auto;">
<p>
<span contenteditable="false" style="width: 75%; height: 80px; display: inline-block; border: 1px solid red;"> </span>.
</p>
</div>
Also available in this JSFiddle.
If you click on the right-side of the period next to the red span and press backspace to delete the period, the caret suddenly shifts to the extreme right of the paragraph. I would expect the caret to be positioned where the period used to be, next to the red span.
Why is it not positioned the way I expect, and is there a way to get the behavior I'm looking for?
This strange behavior is happening because of the p tag, the cause is possibly some conflict between widths, you can edit the css of the tag, instead of using display:block(default), use display:inline.
I created this fiddle: JsFiddle, with display:inline, was the closest I could get from the display:block.
I tried the align attribute but I did not succeed.
I'm fairly confident that it's the span causing it, because the moment you remove it or even display: none it, the problem goes away. I got really curious about this myself and did some searching, this person seems to have the same problem as you.
Why Is My Contenteditable Cursor Jumping to the End in Chrome?
Non-breaking spaces are just what they sound like — spaces where a line break will not occur. You should not use them to add space between words, sentences, or elements. Especially not elements.
Remove & nbsp; (with space or will actually make space :D) and everything's good.

Hover event won't fire in firefox

The following code shows a disabled textbox wrapped in a div with a jQuery UI tooltip attached to it. The jQuery tooltip will be shown properly in Chrome, Safari and IE when hovering the textbox (or, more precisely, the textbox covered div) but not in Firefox (28.0). Can somebody explain this behaviour and offer a fix? I know that event are generally not fired on disabled elements, so that's why it is bound to the wrapping div.
HTML:
foo
<div id="container" title="Tooltip test"
style="background: green; display: inline; position: relative; z-index: 10">
<input id="box" type="textbox" disabled="disabled" value="baz"
style="position: relative; z-index: 1"></input>
</div>
bar
JavaScript:
$("#container").tooltip();
Here is a jsfiddler
I found a trick. you can use display:inline-block; and background:transparent; and add the trick which is padding:2px; to the #container div. and it will work the way you want ;)
http://jsfiddle.net/banded_krait/TAD2w/33/
You are correct, disabled elements do not fire jQuery mouse events, and because of this, your tooltip is still not firing.
If you hover over the little green sliver on the right side of the textbox, it does fire. One solution to this is to move the textbox behind its container onDisabled.
input[disabled]
{
z-index: -1;
}
Obviously, this has the limitation of the background needing to be transparent if you want to still see the element, however, it does work in firefox.
JSFiddle
Solution:
type about:config in firefox address bar and press enter search for below option browser.chrome.toolbar_tips and toggle it.
Go to "about:config" and toggle "browser.chrome.toolbar_tips" to "true".
Rahul

CSS hover effect on ajax content and mobile devices

I've build a quiz. Each question has 2 answers. When the visitor answers a question, the next one is loaded using Ajax. Before the questions are loaded the visitor has to click a start button first, so the HTML for the questions isn't included in the initial page load.
The problem is when a question is anwsered, the hover effect from the previous question is still active when the next one is loaded.
For example: I anwser question 1 with "B" > question 2 is loaded > the hover effect is active on button B for question 2
I've included an image to make this more clear.
I only have this on mobile devices (iPhone, iPad,...) but not on my laptop.
I've done some research if I can alter the hover pseudo class, but apparently this isn't possible using javascript.
I think the problem is that the HTML is the same for each question, so the hover state stays active for the css class when the first question is answsered.
I can't supply a jsfiddle because the questions are entered as a content type in Drupal, and I can't include the entire Drupal in a fiddle. But here is the HTML and CSS.
<div class="quiz_st_content form-wrapper" id="ajax_form_multistep_form_content">
<div class="quiz_st_content_answer form-wrapper" id="edit-a--2">
<div class="quiz_st_content_answer_info_wrapper">Option A</div>
<div class="quiz_st_content_answer_button_wrapper">
<input class="quiz_st_content_answer_button form-submit ajax-processed" type="image" id="edit-answer-a-2" name="answer_a_2">
</div>
</div>
<div class="quiz_st_content_answer form-wrapper" id="edit-b--2">
<div class="quiz_st_content_answer_info_wrapper">Option B</div>
<div class="quiz_st_content_answer_button_wrapper">
<input class="quiz_st_content_answer_button form-submit ajax-processed" type="image" id="edit-answer-b-2" name="answer_b_2">
</div>
</div>
</div>
CSS
input.form-submit.quiz_st_content_answer_button {
margin: 0;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
height: 30px;
width: 30px;
padding: 20px;
background: #ccc;
}
Hover
input.form-submit.quiz_st_content_answer_button:hover {
background: #ba043f;
}
As mentioned above, this only happens on mobile devices. I've been bashing my head at this for hours now and I'm clueless on how to resolve this.
If anyone could help me, or point me in the right direction it would be greatly appreciated.
When I was working with mobile devices I added
ontouchstart=""
to the body tag like so:
<body ontouchstart="">
This made the hover pseudo selectors not act so awkwardly for me, it may be worth a shot.
I was able to fix this. Well,..its not really a fix because the hover state is still active, but I overwrite the color with the default color on touch devices, like so:
$('.quiz_st_form,').bind('touchstart', function(){
$('body').addClass('touchdevice');
});
So when someone "clicks" on the quiz start button on a mobile device, my body gets the class touchdevice and I "remove" the hover with CSS, like so:
body.touchdevice input.form-submit.quiz_st_content_answer_button:hover {
background: #ccc;
}
Technically the :hover state is still active, its just not visible anymore.
I don't really see a better way on fixing this at the moment. If someone does, please let me know.

Prevent text selection from exiting a div

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>

Categories