I have a contenteditable div with spellcheck set to false. I have a button that when clicked, changes the spellcheck attribute to true, but the spellcheck won't kick in until I click inside the div. I have tried triggering events for click, focus, blur, change etc. on the div, and nothing causes the red lines to appear. This is in old jQuery 1.8 (legacy app). is there a trick to this?
$('.spellcheck').live('click', function() {
$('#editor').attr('spellcheck', true);
$('#editor').click();
$('#editor').focus();
$('#editor').blur();
$('#editor').change();
});
I have also wrapped the events in a 1 second setTimeout to get past any asynchronous race conditions, but no luck.
HTML Part:
<div id="editor" class="editor" contenteditable spellcheck="false"></div>
<button class="spellcheck">Check Spelling</button>
this isn't really a problem of contenteditable, it happens on a normal div as well.
Click the button, it adds the spellcheck attribute and then sets focus to the #editor div. Spellcheck is active and underlining misspelled words.
Here it is in jQuery 1.8.1:
$('.spellcheck').click( function () {
$('#editor').attr('spellcheck', true);
$('#editor').focus();
});
#editor {
width: 200px;
height: 100px;
border: 1px solid #e0e0e0;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<div id="editor" contenteditable spellcheck="false">
somme mispellled wordds
</div>
<button class="spellcheck">Check Spelling</button>
Here's the same code in a different snippet, this one running jQuery 1.2.3:
$('.spellcheck').click( function () {
$('#editor').attr('spellcheck', true);
$('#editor').focus();
});
#editor {
width: 200px;
height: 100px;
border: 1px solid #e0e0e0;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div id="editor" contenteditable spellcheck="false">
somme mispellled wordds
</div>
<button class="spellcheck">Check Spelling</button>
Related
I have a button with a className 'actions'
This button shows the
css styling from '.actions' but not '.actions button' . I expect both to be included.
This syntax here works for every element except the button.
The full code is at: https://github.com/keithmacinnis/for-play-activity-browser
Activity.module.css
.item {
margin: 1rem 0;
}
.image {
width: 100%;
height: 20rem;
overflow: hidden;
border-top-right-radius: 6px;
border-top-left-radius: 6px;
}
.image img {
width: 100%;
object-fit: cover;
}
.content {
text-align: center;
padding: 1rem;
}
.content h3 {
font-size: 1.25rem;
color: #2c292b;
}
.actions {
padding: 1.5rem;
text-align: center;
}
.actions button {
font: inherit;
cursor: pointer;
color: #77002e;
border: 1px solid #77002e;
background-color: transparent;
padding: 0.5rem 1.5rem;
border-radius: 4px;
}
.actions button:hover,
.actions button:active {
background-color: #ffe2ed;
}
Activity.js
import css from "./Activity.module.css";
import Card from "./Card";
function Activity(props) {
return (
<li className={css.item}>
<Card>
<div className={css.image}>
<img src={props.activity.image} alt={props.activity.title} />
</div>
<div className={css.content}>
<h3>{props.activity.title}</h3>
<address>{props.activity.address}</address>
<p>{props.activity.description}</p>
</div>
<div>
<button className={css.actions}>Join Activity</button>
</div>
</Card>
</li>
);
}
export default Activity;
Again, I'm unsure why my button receives the stylings for padding and text-align, but the eight properties that follow are ignored.
I do not have much experience with creating selector combinations that include an element type and className, but I just did a little experimenting on my own, and it appears that these may be considered sibling selectors (as opposed to one being the child of the other). Also, it seems like the element type may have to come before the className.
It looks like if you write the selectors like one of these two ways, it should work:
button ~ .actions {
*styles*
}
button + .actions {
*styles*
}
You can read more about combinators here:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
To use .class selector for a specific element. You need Start with the element name first, then write the period (.) character, followed by the name of the class... like this
Button.actions {
font: inherit;
cursor: pointer;
color: #77002e;
border: 1px solid #77002e;
background-color: transparent;
padding: 0.5rem 1.5rem;
border-radius: 4px;
}
If that doesn't work. It might be a problem with the browser using your previous css version from the cash and not the updated styling. To solve it use this:
Ctrl + F5 On Mac OS (in Chrome) use: Cmd + Shift + R .
This will force your browser to reload and refresh all the resources related to the website's page.
It was fixed by this change in Activity.js :
new code:
<div className={css.actions}>
<button >Join Activity</button>
</div>
old code:
<div>
<button className={css.actions}>Join Activity</button>
</div>
I want to style a form that has the label and input inside the form field and when I'll write something inside the input (probably with focus), I want the borders to light up with some blue. Now I have something like this:
HTML
<div class="login-form-field">
<label for="email" class="login-form-label">Email:</label>
<input class="login-form-input" autofocus="autofocus" type="email" value="" name="user[email]" id="user_email">
</div>
CSS
.login-form-input{
margin-left: 20px;
width: 90%;
outline: none;
border: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: 0 0 0px 1000px white inset;
}
.login-form-label {
font-size: 13px;
font-weight: 300;
padding-left: 20px;
}
.login-form-field{
width: 100%;
border-radius: 0px;
height: 6rem;
border: 0.5px solid grey;
box-shadow: 0px 0px 0px;
}
I already tried to select the parent to made some change and other stuff I found on google. The closest I got was to highlight with blue when the mouser was over it with :hover, but i need the color to stay as I'm with the input selected.
.login-form-field:hover {
border-color: blue !important;
}
Here is the JSFiddle, if anyone could help I would be grateful!
You can now do this in pure CSS so no JavaScript is needed.
The new CSS pseudo-class :focus-within would help for cases like this and will help with accessibility when people use tabbing for navigating, common when using screen readers.
.login-form-field:focus-within {
border-color: blue !important;
}
The :focus-within pseudo-class matches elements that either themselves
match :focus or that have descendants which match :focus.
You can check which browsers support this http://caniuse.com/#search=focus-within
You can do like this, where you add an extra div, absolute positioned, which acts as the border, ... and no script is required.
.login-form-input {
margin-left: 20px;
width: 90%;
outline: none;
}
.login-form-label {
font-size: 13px;
font-weight: 300;
padding-left: 20px;
}
.login-form-field {
position: relative;
width: 100%;
border-radius: 0px;
height: 6rem;
box-shadow: 0px 0px 0px;
}
.login-form-field input ~ .login-form-field-border {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
border: 0.5px solid grey;
z-index: -1
}
.login-form-field input:focus ~ .login-form-field-border {
border: 2px solid blue;
}
<div class="login-form-field">
<label for="email" class="login-form-label">Email:</label>
<input class="login-form-input" autofocus="autofocus" type="email" value="" name="user[email]" id="user_email">
<div class="login-form-field-border"></div>
</div>
CSS does not have native support for parent selecting. If your goal is to have .login-form-field have a blue border on focus you're going to have to rely on JavaScript to add the respective CSS.
The following CSS:
.login-form-field.highlight {
border-color: blue;
}
With the following jQuery
$('.login-form-field').hover(function() {
$(this).toggleClass('highlight');
});
Would achieve that goal. I should note that jQuery is certainly not necessary here; it's just what I prefer to use.
React with jquery:
$( document ).ready(function() {
console.log( "ready!" );
$('.login-form-input').focus(function() {
$(this).parent().css( "border", "#99f 2px solid" );
});
$('.login-form-input').focusout(function() {
$(this).parent().css( "border", "" );
});
});
Although this is an old answer. I am answering this so anyone who lands here can use just CSS to achieve this.
Use CSS3 pseudo element: focus-within
You could do:
form:focus-within {
border-color: blue !important;
}
if you want to give the border color when the input is active you can add like this:
.login-form-input:focus {
border:1px solid blue;
}
So I'm making a web app using HTML, CSS, JavaScript, and AngularJS.
So far, I have a box with some content in the box. When that box is clicked, I call a javascript function to display more boxes and I did that using ng-click.
<div ng-click="!(clickEnabled)||myFunction(app)" class ="box">
*** things displyaed inside the box ***
</div>
clickEnabled's value (true or false) determines if myFunction() gets called or not and this part works perfectly. ng-click is disabled when clickEnabled is false.
Now the problem is that in my css file, I have my .box class such that the cursor is pointer when I hover over the box and background of the box also changes on hover. Is there a way to make cursor:default and make it so that it doesn't change background color of box when ng-click is disabled or when clickEnabled is false?
Here's a sample of my css code
.box {
border: 1px solid lightgray;
padding: 10px;
border-radius: 5px;
border-color: white;
box-shadow: 0 0 5px gray;
cursor: pointer;
background: #353131;
border-width: 2px;
display: inline-block;
width: 300px;
height: 150px;
}
.box:hover {
background-color: dimgrey;
border-color: grey;
}
Again, I don't want the cursor to be pointer when clickEnabled is false/ng-click is disabled.
Thanks in advance :)
You can try to use ng-class
<div ng-click="!(clickEnabled)||myFunction(app)" ng-class="{no-cursor: !clickEnabled}" class="box" >
*** things displyaed inside the box ***
</div>
.box.no-cursor {
cursor: default;
}
It just confuse me.
As the code below shows, when you press "ctrl + b" in div, the font weight turn bolder, while, it won't happen in textarea.
This question is based on comments in Marcus Ekwall's answer to Rendering HTML inside textarea. But I can't add a comment, so I ask here.
div, textarea {
width: 100px;
height: 100px;
border: 1px solid;
padding: 5px;
}
textarea {
resize: none;
}
<div contentEditable="true"></div>
<textarea contentEditable="true" placeholder="textarea"></textarea>
in textarea doesn't work because It can not support HTML tags
when it run document.execCommand("bold") add <b>fdsfsdfds</b> in selected text
Here you are an example using jQuery (updated)
$("#editor").keypress("c",function(e){
if(e.ctrlKey) {
document.execCommand('bold', false, null);
}
})
#editor {
width: 200px;
height: 200px;
border: 1px solid;
padding: 5px;
resize: none;
border: 1px solid black;
word-wrap: break-word;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="editor" contentEditable="true"></div>
please see this post about keypress jquery: keypress, ctrl+c (or some combo like that)
more examples about document.execCommand http://codepen.io/netsi1964/pen/QbLLGW http://codepen.io/netsi1964/pen/QbLLGW
The behavior is just browser specific. Different browsers have different behaviors. And thanks to adeneo's mention: In a textarea, one can't add anything other than plain text.
I'm making a contenteditable div to grab the user input.I want to make the placeholder text starts exactly where the cursor is, however The demo shows that the placeholder text start 2 characters(white space) behind the cursor. Any idea how to fix it?
<div id="comment_box2" contenteditable="true" autofocus="autofocus" autocomplete="off" spellcheck="false" placeholder="this text starts after the cursor"></div>
<style>
/*[contenteditable=true]:empty:before{
content: attr(placeholder);
display: block; For Firefox
}*/
#comment_box2{
background-color: white;
/*position:relative;*/
border: 1px solid blue;
/*height:60px;*/
width: 500px;
padding: 10px;
color:black;
border-radius:3px;
text-indent: 10px;
font-size:18px;
/*border-color:yellow;*/
}
#comment_box2:focus{
outline-style:solid;
outline-color:blue;
outline-width:0px;
}
</style>
<script type="text/javascript">
window.onload = function() {
document.getElementById("comment_box2").focus();
};
</script>
Remove: text-indent: 10px;
http://jsfiddle.net/cty5cxg7/
Tested in Firefox and Chrome, works fine.