Develop Reference

Get div's value to insert to textarea js

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>

How to remove the gap inside bootstrap input element?

In this input-group,as you can see there's unnecessary gap inside input field and I want to get rid of it
As you can see above,this black line is the distance between my number and link button.How can I remove it?
.resetToDef{
display: block;
width:25.8%;
max-width: 195.1px;
border-radius: 4px;
border: 1px solid #FF7921;
}
.resetToDef a{
font-size:12px;
color:#FF7921;
border: none;
text-decoration-line: underline
}
.resetToDef input{
display:inline-block;
width:57px;
border:none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="resetToDef input-group">
<input type="number" class="form-control" placeholder="30">
Back to default
</div>

From your snippet :
The width is automatically calculated by flex. So if you remove flex, you can then play with the width and the padding.
.resetToDef.input-group > input.form-control {
flex: none;
width: 52px;
padding-right: 5px;
}
Resulting in :
Beware that the little arrows may not look exactly the same size from browser to browser.

Triggering spellcheck after attribute change

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>

Cursor is not centered in an empty editable anchor with text-align center on firefox

I have some anchor tags as buttons in an application on which contenteditable is set to true and text-align is set to center
but if an anchor has no text in it the cursor should be centered as the tex-align is set to center and it works as expected on chrome but on firefox it shows the cursor to extreme left when nothing is typed.
Here's the HTML code:
.editable {
display: block;
color: red;
border: 1px solid red;
height: 100px;
width: 100%;
text-align: center;
}
<a class="editable" contenteditable>
</a>
I know it is a bug with Firefox but is there a way to solve this?

Update
Added placeholder feature and made it more versatile by using attr() CSS function. In order to make it work exactly like a placeholder there's two criteria that dictate the behavior of a placeholder (at least in terms of an HTML input or textarea)
Must be present when text box is empty. :empty
Must not be present when text box is in focus. :empty:not(:focus)
Each anchor can be assigned different placeholders
<a contenteditable data-ph='Placeholder'></a>
<!--Assign tag data-ph attribute and placeholder text as value-->
a::before {
content: attr(data-ph)
/* Add a pseudo-element ::before or ::after and use attr() function and data-ph
as parameter */
Objective
Behavior: Text cursor is aligned left inside of a contenteditable element with text-align: center while empty and in focus.
Expected: Text cursor is aligned center inside of a contenteditable element with text-align: center while empty and in focus.
Pure CSS Solution
Assign ::after pseudo-element to anchor.
Style ::after as a blinking cursor.
Set :empty and :focus pseudo-selectors on ::after pseudo-element.
Hide real cursor with caret-color: transparent when anchor is in focus and empty.
Assign display: none to ::after when anchor isn't empty.
html {
font: 300 10pt/1.2 'Segoe UI'
}
.edit {
display: block;
min-height: 100px;
min-width: 100%;
border: 1px solid red;
font-size: 2rem;
color: red;
text-align: center;
}
.edit:empty:not(:focus)::before {
content: attr(data-ph);
font-style: italic;
font-weight: bold;
color: #ccc;
letter-spacing: 0.2em;
word-wrap: break-word;
}
.edit:focus::before {
display: none;
}
.edit:focus:empty {
caret-color: transparent;
}
.edit:focus:empty::after {
content: "";
display: inline-block;
width: 0.1ch;
height: 2.4rem;
vertical-align: text-bottom;
background: red;
animation: blink 0.85s steps(2) infinite;
}
.edit:focus::after {
display: none;
}
#keyframes blink {
0% {
opacity: 0;
}
}
<a class='edit' contenteditable data-ph='Placeholder'></a>
<a class='edit' contenteditable data-ph='🗼🏯🏨🏗️'></a>

I did a tiny hack with power of Javascript <3
It's related to the CSS you've provided. Let me know about the result ;)
(function() {
if (navigator.userAgent.search("Firefox") === -1) { return; }
const editableElements = document.querySelectorAll('.editable');
editableElements.forEach((el) => {
if (!el.innerHTML) {
const leftPadding = window.getComputedStyle(el).getPropertyValue('padding-left')
el.setAttribute('data-padding-left', leftPadding);
el.style.paddingLeft = `calc(50% + ${leftPadding})`;
el.style.width = '50%';
}
el.addEventListener('DOMSubtreeModified', () => {
const space = parseFloat(el.style.paddingLeft);
if (el.innerHTML) {
el.style.width = '100%';
el.style.paddingLeft = el.getAttribute('data-left-padding');
} else {
const leftPadding = window.getComputedStyle(el).getPropertyValue('padding-left')
el.setAttribute('data-padding-left', leftPadding);
el.style.paddingLeft = '50%';
el.style.width = '50%';
}
});
});
})();
.editable {
display: block;
color: red;
border: 1px solid red;
height: 100px;
width: 100%;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Hack!</title>
</head>
<body>
<a class="editable" contenteditable></a>
<a class="editable" contenteditable></a>
</body>
</html>

adding search icon to input box

<div id="inputs">
<input type="text" value="">
<input type="text" value="">
</div>
<input type="button" id="add" value="Add input">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
$('#add').click(function(){
$('#inputs').append('<input type="text" value="">');
});
});
</script>
Within the code above, i want to add a search icon for every new input generated with a button (id=add ; not shown here for simplicity). This would be a typical input:
<label>
<input type="text" class="search" name="word" autofocus="autofocus" />
<span class="search-icon">
<span class="glass"></span>
<span class="handle"></span>
</span>
</label>
With CSS i could position the search icons in a fixed way.
Thanks

Here's the CSS code that I'd use:
#add {
padding: 17px;
padding-left: 55px;
width: 300px;
border: 1px solid #f5f5f5;
font-size: 13px;
color: gray;
background-image: url('http://i47.tinypic.com/r02vbq.png');
background-repeat: no-repeat;
background-position: left center;
outline: 0;
}
Note: I added a lot of extra codes to make the search box look better, the necessary code to make the search box apear is padding-left, background-image:url, background-repeat and background-position. Replace "http://i47.tinypic.com/r02vbq.png" with whatever search icon you want.
It's also important to know that now in HTML5, most browsers render
<input type="search" results>
with a search icon. The input type search makes it a search box, with a "x" button to clear, and adding "results" also displays a search box. Of course you could also add an x button with CSS and JavaScript to a regular search box. It's also important to note that input type search allows very little styling. Demo on Safari on a Mac:
Tell me if this helps you, and make sure to mark as the answer. :)

Put the image into the span, for example using background-image, then give it a relative position and move it to the left so it overlaps the right end of the search box, for example:
#g-search-button {
display: inline-block;
width: 16px;
height: 16px;
position: relative;
left: -22px;
top: 3px;
background-color: black; /* Replace with your own image */
}
Working example on JSBin
Note: This is not my answer, i've found it here

There's a step by step on kirupa.com here: http://www.kirupa.com/html5/creating_an_awesome_search_box.htm
With relevant bit of CSS for you here:
input[type=text] {
width: 260px;
padding: 5px;
padding-right: 40px;
outline: none;
border: 2px solid #999999;
border-radius: 5px;
background-color: #FBFBFB;
font-family: Cambria, Cochin, Georgia, serif;
font-size: 16px;
background-position: 270px -10px;
background-image: url('http://www.kirupa.com/images/search.png');
background-repeat: no-repeat;
}