I tried to replicate the problem I'm having on my website with the below js fiddle but couldn't.
http://jsfiddle.net/YD6PL/116/
HTML:
<input class="givenLetters" type="text" value="h" disabled>
CSS:
.givenLetters {
width: 40px;
height: 40px;
text-align:center;
font-style:italic;
font-weight:bold;
text-decoration:underline
}
For some reason on the website when the user clicks and holds the mouse button they can scroll the input text up and down. It would be like being able to drag the 'h' in the js fiddle example up and down but still within the textbox.
What could cause this behavior? I would like the website to function as the js fiddle but can't figure out what would be different with the website.
The box-sizing, display or line-height properties come to mind if you're getting scrollable text. Open up a web development console (Firebug in Firefox or CTRL+SHIFT+J in Chrome), use the element selector to choose the element and then start disabling properties until the effect stops. Keep in mind it could be a combination of properties as well.
Related
I'm trying to make an editor that inserts special types of elements. I figured out that if you set contenteditable to false on the elements within it, it wont let you type inside it (which is good), but it doesn't put the cursor before or after either, the cursor just disappears.
Is there a way to stop the user from typing inside the element but retain cursor focus when you click on it, as if it's a normal text symbol?
div div {
width: 30px;
height: 30px;
background: red;
display: inline-block;
}
div {background: #ccc}
<div contenteditable="true">
this one will let you type<div></div>inside the red box
</div>
<div contenteditable="true">
this one wont, <div contenteditable="false"></div> but the cursor does nothing when you click inside it now
</div>
<div contenteditable="true">
cant place cursor after this box <div contenteditable="false"></div>
</div>
You also cant click at the end of the text block if the block is last.
Big problem for usability, really would like to fix this.
Facebook has solved this problem, but I can't figure out if it's with js or css:
edit: I've discovered fb changes the caret-color property to black, but it then seems to jump to the position outside of the span after you type, which must be done with js. Still trying to figure out how.
edit: Tried a lot of things, thought I had it working but it still caused other weird problems. I recommend you just don't attempt this and just use an image element or emoji.
Looks like the readonly attribute is the tool for the job and has acceptable support caniuse.
[contenteditable]:read-only {
cursor: not-allowed;
}
css-tricks article is legit.
I have a component that, upon a hover, shows a button and a link that you can click on. This is not a menu... just a box in the middle of the page.
For accessibility, I would like a user to be able to tab into the container (happens now, and displays the content in the .HiddenUntilHover class) AND also continue to tab to the button and link that show up on the hover/focused state.
Right now you can focus on the container and see the hover state; however, when you tab it just goes to the next element and does not allow you to tab to the button or link WITHIN the hover state.
Pseudo code example:
/* My component .jsx */
<div tabIndex="0" className="MainContainer">
<div className="SomeOtherClass">
<div className="HiddenUntilHover">
/* I would like to be able to tab to these clickable things! */
<button>Click me!</button>
I am also clickable
</div>
</div>
</div>
And my SCSS:
.HiddenUntilHover {
display: none;
}
MainContainer:focus,
MainContainer:hover,
> .HiddenUntilHover {
display: block
}
I ran into this issue a few days ago and I solved it using css classes to make the hovered content accessible via keyboard navigation.
The way I got this working was to use css pseudo-classes to ensure that when the div element is active & focused that the buttons inside also display. Specifically the additional use of :focus-within & :focus-visible should ensure that when you tab over the list items, their contents are also displayed and keyboard accessible.
.MainContainer {
&:not(:hover, :focus, :active, :focus-visible, :focus-within) {
.HiddenUntilHover {
visibility: hidden;
}
}
}
<body>
<div tabIndex="0" className="MainContainer">
Content
<div className="SomeOtherClass">
<div className="HiddenUntilHover">
<button>Click me!</button>
I am also clickable
</div>
</div>
</div>
</body>
Here's a link to the Codesandbox demo of this working
When the box is in focus, tabbing further to the button will make the box blur, which will hide it, and its contents, so focus will move to the next accessible element. I think this is the behavior you are experiencing.
You might consider using inserting an aria-activedescendant or tabindex attribute when the box comes into focus. This requires a little javascript.
Strictly speaking, you don't need to rely on the hover state to make that control accessible. You could have an offscreen (or clipped) button/link that is not a DOM child of the hidden (display:none) box. If you take this approach, read up on the aria-owns attribute.
As long as it is marked up as a button or link (or has a tabindex="0" setting), and is not 'really' hidden, it ought to be possible to tab to it.
Try increasing the properties of the class MainContainer
for example.
.MainContainer {
width: 100%;
height: 100px;
}
.MainContainer .HiddenUntilHover {
display: none;
}
.MainContainer:hover .HiddenUntilHover, .MainContainer:focus .HiddenUntilHover {
display: block;
}
Elements appearing on hover are inherently inaccessible. You are experiencing one side of the problem with your code, where it is difficult to make it keyboard accessible.
But think about touch screens that have no real concept of hover: is there some way to reach your button on a smarphone or tablet?
For a more pragmatic answer, if you need to stay with hover, a less hacky solution than the two already posted ones could be the following:
use focusin and focusout events. See for example this question for explanations and differences with focus/blur, and this w3school doc for browser compatibility.
You will have to structure your HTML differently, such as:
<div id="outer">
<div id="hover">
...
</div><!--hover-->
<button>Your button which only appears on hover</utton>
</div><!--outer-->
As well as use a bit of js:
$('#outer').on('focusin', __=>$('#hover').classNames.add('keep-visible'));
$('#outer').on('focusout', __=>$('#hover').classNames.remove('keep-visible'));
With a corresponding .keep-visible class which will leave the element display:block (I'm not a CSS expert, I let you write the code).
The overal functionning is the following: when some element within #outer takes the focus, the focusin element is fired due to bubbling. In the event, you put your class .keep-visible which makes the element to stay visible.
The focusout event is fired when the focus leaves the last element within #outer. At that point you remove the .keep-visible class, which makes the element to disappear.
According to the link above, onfocusin/out aren't standard, but are supported by all major browsers including IE. Firefox is the last one to implement it in 52.0, so it's a kind of defacto standard; we can reasonably expect that it won't disappear soon.
I am having trouble with two buttons at the top of my mobile site
www.thefriendlydentist.ie
They are clickable on desktop but on mobile I get no response?
The html is placed in the header of the WP theme.
<div id="topcontact-2" style="background-color:white;">
<p style="background-color:white;padding:none;"class="call-button" id="call-button"> CALL US </p>
<p style="background-color:white;padding:none;" class="call-button" id="email-button"> EMAIL US </p>
</div>
You need check your all elements (divs) properly, I strongly suggest you using mobile device toolbar on Chrome or Mozilla.
If you look on desktop browser using by mobile device toolbar, you will see the some elements overlapping the all page. So your buttons that you want to click stay behind of those elements.
- Option 1: remove overlapping elements
- Option 2: use z-index to manage them.
<div class="mobile-bg-fix-img-wrap">
<div class="mobile-bg-fix-img" style="/* width: 375px; *//* height: 767px; */"></div>
</div>
You can see in image how above elements fill the page.
How Z-Index Works?
All of us are quite comfortable set some x (left:10px) and y (top:10px) values to elements by using CSS but not for z-index. Z-index property defines the level of an HTML element on the screen. Let's check the elements below.
In brief, z-index will define the closeness of the elements to the user. In this sample you can assign elements like below:
red square z-index:10
blue circle z-index:56
white square z-index:985
in this order, nothing will change. In this case, we know that z-index is relative. Another important thing, we need to know about z-index, it will only work on an element whose position property has been explicitly set to absolute, fixed, or relative
To deep dive, please check the z-index documentation.
How to Activate Mobile Toolbar on Chrome?
Mobile toolbar shows how your elements are placed in a mobile browser. Using this tool, you can detect almost everything you would expect to see in a mobile browser. You can also inspect and alter your CSS codes easily.
Below image will guide you to how to activate mobile toolbar on Google Chrome.
Other Possibilites For The Problem
1. Javascript Blocking
Using javascript, you can override original behavior of an HTML element. Check below code, this will prevent the real action of the <a> element.
Non-clickable Link
Using JQuery
<script>
$(".prevent-click").click(function(){
return false;
})
</script>
Using Javascript
document.getElementsByClassName("prevent-click")[0].addEventListener('click', function (event) {
event.preventDefault();
return false;
});
Please check your codes carefully, is there any Javascript code to prevent the original action of HTML elements. In addition, to check this quickly, you can disable all javascript codes on Chrome by following steps below.
Open Developer Console
Go to Settings - right top corner of the inspection tool
Check the box (Disable Javascript)
Refresh the page.
Please go in to your CSS and make this change.
.mobile-bg-fix-wrap .mobile-bg-fix-img {
position: absolute;
width: 100%;
height: 125%;
left: 0;
top: 0;
background-size: cover;
}
To:
.mobile-bg-fix-wrap .mobile-bg-fix-img {
position: absolute;
width: 100%;
height: 125%;
background-size: cover;
}
The top and left set to 0 was overlapping the two buttons causing it that you could not click on them.
HTML links not clickable on mobile, but are clickable on desktop.
I have one solution. Try this
Html
<a href="https://www.stackoverflow.com" class="goclick">
css
.goclick{
position: relative;
z-index: 9;
}
For this, go to Google Chrome > Developer tools.
Inspect the element, if it is being overlapped by anything, add clear: both;
to the overlapping element.
Actually, in my issue, it fixed everything.
for me, i had a class with...
z-index: -1
which was forcing the parent <div> to the back. changing this to 0 or simply removing it, solved the problem
ref: https://www.sitepoint.com/community/t/solved-href-not-working/248882/6
I've built an upload button that's formatted to look like your typical html button, instead of the browser standard file upload form. The approach was to style an anchor element and overlay a transparent file input element on top.
This approach works fine in all browsers but IE. In IE, when the user clicks the upload button a text cursor appears as if the user had clicked on a text input box. The user can trigger the file upload dialog by double clicking the button. But this isn't the behavior we want or that anyone expects.
I'm at a loss as to why this is happening. I've set up a jsfiddle demonstrating the issue here:
http://jsfiddle.net/davelee/yfSmc/3/
Meet this bug on IE11, fix it with font-size: 0;
I have just worked on this exact issue. With IE, yes, there is a small area on the left of the button that acts as a text input (for the file name to be entered manually). The solution that I figured out was to increase the font-size of the input field. Strange, I know, but by increasing the font-size, you increase the "Browse..." button portion of their input field, and therefore increase the clickable area and push out the text portion of their upload button. Since the button is transparent anyway, nobody is the wiser :)
Setting the width and height of the file input element fixes the issue in both ie8 and ie9.
http://jsfiddle.net/davelee/yfSmc/4/
Take a outer div to that input file apply over flow hidden and width to it, then to the input file apply some css like: font-size, margin-left in negative.
<div class="outerWrap">
<input type="file" id="fileUpload"/>
</div>
and the css will be:
.outerWrap {
width: 200px;
height: 50px;
overflow: hidden;
}
#fileUpload {
width: 210px;
height: 50px;
margin-left: -10px;
font-size: 70px;
}
adjust the width and margin-left according to your requirement.
for reference got this link: http://jsfiddle.net/TrdJ8/
and try it out on IE-9
try adding css
z-index
to your absolute elements.
lowest element
z-index:1
highest
z-index:2;
and set a z-index on the container element.
I have a textfield is there a way to hide the blinking text cursor? I say this because I am doing a horror/mystery website and one of the clues is to start typing anywhere.
Maybe I can do it with javascript?
The basic idea is, that the cursor's color is the same as the text's color. So the first thing you do is make the text transparent, thus taking the cursor away with it. Then you can make the text visible again with a text shadow.
Use this link to see it live in jsfiddle.
input[type="text"]{
color : transparent;
text-shadow : 0 0 0 #000;
}
input[type="text"]:focus{
outline : none;
}
Update:
Known to not work in iOS 8 and IE 11
Another idea of my is a bit more hacky and requires javascript.
HTML and CSS part:
You make 2 input fields and position one exactly on top of the another with z-index, etc. Then you make the top input field completely transparent, no focus, no color, and alike.
You need to set the visible, lower input to disabled, so that it only shows the content of the above input, but not actually works.
Javascript part:
After all the above you sync the two inputs. On keypress or on change you copy the contents of the higher input to the lower.
Summing all the above: you type in an invisible input, and that will be sent to the backend when the form submitted, but every update of the text in it will be echoed into the lower visible, but disabled input field.
caret-color: transparent !important; works in newer browsers
Try this:
$(document).ready(
function() {
$("textarea").addClass("-real-textarea");
$(".textarea-wrapper").append("<textarea class=\"hidden\"></textarea>");
$(".textarea-wrapper textarea.hidden").keyup(
function() {
$(".textarea-wrapper textarea.-real-textarea").val($(this).val());
}
);
$(".textarea-wrapper textarea.-real-textarea").focus(
function() {
$(this).parent().find("textarea.hidden").focus();
}
);
}
);
.textarea-wrapper {
position: relative;
}
.textarea-wrapper textarea {
background-color: white;
}
.textarea-wrapper,
.textarea-wrapper textarea {
width: 500px;
height: 500px;
}
.textarea-wrapper textarea.hidden {
color: white;
opacity: 0.00;
filter: alpha(opacity=00);
position: absolute;
top: 0px;
left: 0px;
}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<div class="textarea-wrapper">
<textarea></textarea>
</div>
The idea is to create a second, invisible <textarea> over/on-top-of the real one. The user is typing in the invisible one but the text doesn't appear (nor the caret/cursor) as it is invisible! You then use JavaScript to assign its value to the visible one.
But it doesn't seem to work in IE8 :'( the caret is still visible even though the opacity is cranked up to 11.
But it works in Firefox... ?
I was looking for a way to hide the blinking cursor on iOS devices for date inputs that trigger a calendar, because you could see the cursor blinking on top of the calendar picker.
input:focus { text-indent: -9999em; }
So in this case my CSS works nicely, obviously the downside is that if you need to see what you are typing then it is not good
I think this is a perfect solution:
make the input wide enough, align right to screen right, thus make cursor and content locate at the outside of the screen, while it's still clickable
Unfortunately you can not style the text cursor with CSS. You can only do some very bad JavaScript tricks but depending on the layout and requirements of your website, it might not be possible at all. So I would recommend to forget the whole idea.
<input style="position: fixed; top: -1000px">
Works in iOS8.
you can "Hide textfield blinking cursor" by calling blur function on focus event
<input type="text" onfocus="this.blur()"/>
function noCursor(a){
var a = document.getElementById(a),
b = document.createElement('input');
b.setAttribute("style","position: absolute; right: 101%;");
a.parentNode.insertBefore(b, a);
if(a.addEventListener){
b.addEventListener("input",function(){a.value = b.value});
a.addEventListener("focus",function(){b.focus()});
}else{
a.attachEvent("onfocus",function(){b.focus()});
b.attachEvent("onpropertychange",function(){a.value = b.value});
};
}
noCursor('inp');
<input id="inp">
You can use the function for each element jou want no cursor for.
Setting the input to readonly also does this since it prevents focus but it may not be applicable to many use cases that still need it.
<input type="text" readonly />
List of recommended css solutions to hide the caret
caret-color: transparent; - For my case this approach wasn't good enough since you're still able to manipulate the input field in order to show the caret on ios. You can reproduce it on an ipad by focusing on an input then press the keyboard button that brings the keyboard down. After that you can simply just click on the input field again and suddenly the caret appears. I have also been able to see the cursor on iphones but i'm not exactly sure how to reproduce it since it seems kind of random.
opacity: 0 - This approach does not work on android devices since you won't be able to focus on the input. Another thing I don't like is the fact that the site wouldn't automatically scroll up/down to the input after focusing.
text-indent: -9999em; - This isn't really a solution in itself since the caret always would be in the left upper corner of the input, atleast on ios devices. Though if you set the width of the input to overflow the website's width then you wouldn't be able to see the caret.
visibility: hidden; display: none; - These solutions do remove the caret but you'll not be able to focus on the input, not even if you've implemented a click event to do it.
font-size: 0; - I do not recommend this approach since it doesn't work on adroid devices and apparently some windows computers. The browser will also zoom in on the input if the font-size is less than 16px therefore you would have to add maximum-scale=1 to the meta viewport tag. You would also have to display the input somewhere else than the input field.
What I did
I ended up not using any of these methods since they didn't work well for my project. I instead used a lightweight code editor like Lajos Mészáros also recommended and made the height of the input 0. That also means you'll need to make a click event on another element that sets the focus for the input. You can look at Monkeytype for reference (I'm not affiliated to that website).
just made a proof of concept for a friend of mine, using #sinfere 's idea:
demo: http://jsfiddle.net/jkrielaars/y64wjuhj/4/
The start of the input is offset so it falls outside of the container (which has overflow hidden)
The actual caracters (and blinking cursor) wil never enter into view.
The fake div is placed below the input field so a tap on the fake div will set focus on the invisible input.
<div class="container">
<div id="fake" class="fake">
<span class='star empty'></span>
<span class='star empty'></span>
<span class='star empty'></span>
<span class='star empty'></span>
</div>
<input type="text" id="password" class="invisible" maxlength="4">
</div>