I have a div behaving as a textarea where I can insert text. I want to mirror value as user typing in this div, to a second textarea in order to be formatted and to send to DB consequently. However, I seem to be having trouble taking div's value. It worked smoothly as I had a regular textarea. Here I used .text() instead of .val() but it doesn't add br. It is supposed to add br as user start a new line.
https://jsfiddle.net/u7mh431k/
$('#fake_textarea').keyup(function(){
var val = $('#fake_textarea').text();
val = val.replace(/\n/g, '<br />\n')
$('#second').val(val);
});
.textbox {
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
border: 1px solid gray;
font: medium -moz-fixed;
font: -webkit-small-control;
height: 28px;
overflow: auto;
padding: 2px;
resize: both;
width: 200px;
min-height: 50px;
}
textarea {
width: 200px;
height: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="textbox" id="fake_textarea" contenteditable></div>
<textarea type="text" id="second"></textarea>
When using contenteditable, the child element is created in html element, so you have to parse it and change it to text. The appropriate property at this time is textContent.
$('#fake_textarea').on('input', function(){
var val = $('#fake_textarea')
.contents()
.map((_,el)=> el.textContent + '<br/>\n')
.toArray()
.join('');
$('#second').val(val);
});
Easy using vanilla JS.
The text you enter in your divis internally wrapped into sub-div elements. Just connect those subdivs' textContentwith a newline character, and assign it to the textarea's textContent.
fake_textarea.addEventListener('input', (e) => {
second.textContent = [...fake_textarea.querySelectorAll('div:not(.textbox)')].map(e => e.textContent).join('\n')
})
.textbox {
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
border: 1px solid gray;
font: medium -moz-fixed;
font: -webkit-small-control;
height: 28px;
overflow: auto;
padding: 2px;
resize: both;
width: 200px;
min-height: 50px;
}
textarea {
width: 200px;
height: 50px;
}
<div class="textbox" id="fake_textarea" contenteditable></div>
<textarea type="text" id="second"></textarea>
Related
I have a <div contenteditable="true"> and a <textarea> on my page. I need to get the text that is typed in the textarea to be displayed in the div, while keeping the text that was already in the div. I already kind of achieved that with a keyup function on the textarea but it is not working properly. I believe the problem must be having the contenteditable text variable updated with each keyup. I tried changing the scope of value1, making it a global variable instead, but it still does not work. Any help?
This is my code:
JSFiddle
$(".secondary").keyup(function () {
var value1 = $(".original").html();
var value2 = $(".secondary").val();
$(".original").html(value1 + value2);
});
div {
width: 300px;
height: 100px;
border: solid 1px #000;
overflow-y: scroll;
}
textarea {
width: 300px;
height: 100px;
border: solid 1px #000;
resize: none;
overflow-y: scroll;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Content Editable:</p>
<div class="original" contenteditable></div>
<br><br>
<p>Text Area:</p>
<textarea class="secondary"></textarea>
So, if you type "Foo" in the contenteditable and "bar" in the textarea, the text in the contenteditable should be "foobar".
Also, if the last character in the contenteditable is a space, typing in the textarea will add a <br> to the contenteditable. Is there a way to fix that?
Better you use change event instead of keyup:
$(".secondary").change(function () {
var value1 = $(".original").html();
var value2 = $(".secondary").val();
$(".original").html(value1 + value2);
/*Reset text area*/
$(".secondary").val('');
});
Instead of using keyup, I'd prefer to use input event handler. Try out the snippet :
$(".secondary").on('input', function(event) {
var val = $('.original').text();
$('.original').text(val + event.originalEvent.data);
});
div {
width: 300px;
height: 100px;
border: solid 1px #000;
overflow-y: scroll;
}
textarea {
width: 300px;
height: 100px;
border: solid 1px #000;
resize: none;
overflow-y: scroll;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Content Editable:</p>
<div class="original" contenteditable></div>
<br><br>
<p>Text Area:</p>
<textarea class="secondary"></textarea>
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>
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;
}
This question already has answers here:
Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)
(26 answers)
Closed 6 years ago.
According to some methods i saw, i tried this to manage the position left of a pseudo element :
$("a").click(function() {
var percent = $("input").val(); //Maths returning an value to set
$(".formEvent").addClass("trig");
console.log(percent);
$("[formEventPointer]").css({ /* CALLING THE PSEUDO ELEMENT*/
left: percent + " %"
});
});
.formEvent {
top: 50px;
/* For the example */
padding: 10px;
height: 80px;
background: #272727;
position: relative;
transition: 300ms;
height: 30px;
margin-top: 10px;
margin-bottom: 0;
}
.formEvent.trig:before {
content: attr(formEventPointer); /* TAKE A SPECIAL LOOK RIGHT THERE */
position: absolute;
left: 5%;
top: -15px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 15px solid #272727;
}
a {
background-color: #1162A7;
color: white;
border: 1px solid grey;
box-shadow: 5px 5px 5px black;
cursor: pointer;
padding: 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class='formEvent'>
Change the position :
<input type="range" value="5" max="100" min="0" step="14.285">
<a>Update</a>
</form>
Unfortunately, i'm not able to properly manage as i want the position of the :before pseudo element, with the attribut set in the content. What did i forget, or how can i fix this ?
EDIT :
It's different because i try to use what the question said to perform a task, i'm not asking for what i already use to accomplish a part of a task...
I guess you are doing it in a bit of wrong way.
You are trying to get element using attribute, rather you should try to apply CSS on the basis of attribute
In HTML:
<span>foo</span>
In jQuery:
$('span').hover(function(){
$(this).attr('data-content','bar');
});
In CSS:
span:after {
content: attr(data-content) ' any other text you may want';
}
Here`s the HTML Input Range
<input id="golden_range" type="range">
I can change the Background Color of the Range Track to "#DDD" using this CSS
#golden_range::-webkit-slider-runnable-track {
width: 300px;
height: 5px;
background: #DDD;
border: none;
border-radius: 3px;
}
#golden_range::-moz-range-track {
width: 300px;
height: 5px;
background: #DDD;
border: none;
border-radius: 3px;
}
but i'm not able to change the background color using Jquery/Javascript. Please help me with this. Here's the code i'm trying to.
$('#golden_range::-webkit-slider-runnable-track').css('background', '#000');
$('#golden_range::-moz-range-track').css('background', '#000');
According to the code in your question, I see a mistake in your syntax. In css the background color property is written as "background-color: color_hex_value". This is how your css code should look like:
#golden_range::-webkit-slider-runnable-track {
width: 300px;
height: 5px;
background-color: #DDD;
border: none;
border-radius: 3px;
}
#golden_range::-moz-range-track {
width: 300px;
height: 5px;
background-color: #DDD;
border: none;
border-radius: 3px;
}
And this is the code for jquery:
$("#golden_range::-webkit-slider-runnable-track").css("background-color", "#000");
In case you are still having doubts, give a look at these two sources for css background-color properties and Jquery css() method.
You can do this now (2020) by making use of CSS variables.
CSS
#golden_range::-webkit-slider-runnable-track {
background: var(--track-background, #ddd);
}
#golden_range::-moz-range-track {
background: var(--track-background, #ddd);
}
Javascript
document.querySelector('#golden_range').style.setProperty('--track-background', '#f00');
(should change the track background to red)
I'm doing this in Player Chrome to style the media player progress bar, using a background gradient on the track to show progress.
Bad news. I have not found a proper way to do... but I found a dirty way;
Insert a style tag in the body of the page. Of course, the content of this tag is generated with javascript:
var estilo = $("<style>").attr("id", "some_id");
//for Chrome, e.g.
var mod= "::-webkit-slider-runnable-track";
var txt= "#id_range" + mod + " {\n";
txt+= " background-color: rgb(100,100,100)\n";
txt+= "}\n";
estilo.text(txt);
$("#some_id").remove();
$("div#other_id").append(estilo);
it's ugly, slow and bad, but it works.
Add below code into your files
CSS:
#golden_range.change::-webkit-slider-runnable-track {
width: 300px;
height: 5px;
background: #000;
border: none;
border-radius: 3px;
}
#golden_range.change::-moz-range-track {
width: 300px;
height: 5px;
background: #000;
border: none;
border-radius: 3px;
}
jQuery:
$(document).on('input', '#golden_range', function() {
var rangeValue = $(this).val();
var changeRange = 20;
if(currrentRange > changeRange){
$("#golden_range").addClass("change");
}
});
Note: Please check changeRange value and change as you want.