Sorry I can't provide anymore information on the issue other than a screenshot, I've currently got no way to test on Windows with Chrome.
This is what the placeholders look like on Win7 Chrome:
Some relevant styles:
.field input, .field textarea {
width: 100%;
}
input, textarea {
background: #fbfbfb;
padding: 15px;
}
input {
line-height: normal;
}
button, input, optgroup, select, textarea {
color: inherit;
font: inherit;
margin: 0;
border: none;
}
label, input {
display: block;
}
HTML:
<div class="field">
<input id="cf-name" type="text" name="name" value="" placeholder="Name" autocomplete="off">
</div>
The page is here:
http://dev.metertech.co.uk/contact-us
Anyone faced this issue and know what's going on?
You have set the line-height for the inputs to be normal, but if you look at your placeholder pseudo-classes, you set them to be line-height: 2. So your placeholder text is trying to occupy more height than the actual height of your inputs, hence the "chopped off" placeholder text.
To fix it, remove the line-height property from the placeholders.
You probably also don't need line-height:normal - it is the default.
Here is your fix
input {
line-height: 28px;
}
Related
I want to use the placeholder value as the title when user click on the text box.
For example in this image Image One the placeholder value is "Email or phone" when user clicks on it it becomes the title of this text box as shown in second image here Image Two . If you didn't understand correctly then please go to gmail.com (New Look Of Sign In) when you click on the text box the placeholder value goes top and when you click outside, that value becomes the placeholder. I want exactly that functionality but I'm unable to do it.
Help me.
You can check this
HTML Code
<div>
<input type="text" class="inputText" />
<span class="floating-label">Email or phone</span>
</div>
CSS Code
input:focus ~ .floating-label,
input:not(:focus):valid ~ .floating-label{
top: 8px;
bottom: 10px;
left: 20px;
font-size: 11px;
opacity: 1;
}
.inputText {
font-size: 14px;
width: 200px;
height: 35px;
}
.floating-label {
position: absolute;
pointer-events: none;
left: 20px;
top: 18px;
transition: 0.2s ease all;
}
Check this fiddle https://jsfiddle.net/60Lfj34s/
I tried for a long time to come up with a pure CSS solution to this, but there is a real issue in that the <input> element will not take a ::before pseudo-element, so you cannot use (for example):
input:focus::before {
content: attr(placeholder);
}
So here is a javascript solution instead:
var myInput = document.getElementsByTagName('input')[0];
var myPlaceHolder = myInput.getAttribute('placeholder');
function addInputLabel() {
if (document.getElementsByClassName('my-label').length < 1) {
var myLabel = document.createElement('div');
myLabel.textContent = myPlaceHolder;
myLabel.classList.add('my-label');
document.body.insertBefore(myLabel, myInput);
}
}
myInput.addEventListener('keypress', addInputLabel, false);
.my-label {
height: 16px;
line-height: 16px;
font-size: 11px;
color: rgb(255, 0, 0);
}
<input placeholder="Placeholder Text" />
Is it possible to display dynamic texts contents inside an HTML input element, some thing similar to how chrome browsers CTRL + F works.
Like it shows the number of hits in the page.
Can anyone please help, if possible how or share some useful materials to achieve the same?
You can easily achieve this using a combination of relative and absolute positioning on the parent and child elements like this:
.field {
position: relative;
display: inline-block;
}
.field__input {
padding-right: 40px;
}
.field__helper {
position: absolute;
right: 5px;
top: 4px;
color: #999;
font-size: 12px;
}
/* this is just fluff to make it look nicer */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
<div class="field">
<input type="text" value="find" class="field__input">
<span class="field__helper">1 of 5</span>
</div>
We use a relatively positioned parent (.fieldRow) to wrap around the input field. Then, we use a span (.helper) containing the text we want to display and using position: absolute; we can position it to the right of the input field. Last of all, we need a little padding on the right hand side of the input to stop the inputted value from bleeding into our helper text.
I am trying to figure out, why in my chat app, everytime I send a message, the textarea puts a line-break instead of just focus on the textarea in the first line in order for me to send a new message.
Let me explain what happens in the video I recorded of my issue:
before send the first hello message, there is a placeholder: Your message . . ., then when I send hello, you should look at the textarea so you will clearly see that the placeholder isn't there anymore, and its because after sending the message, I have no idea why the textarea is putting a line-break, in the video, some seconds after I send the message, the placeholder appears again, is because I press the delete key/button in my keyboard in order to delete the line-break or the non-existence character in the text area.
All the HTML and CSS I have for that element is this
HTML
<div className="chat-form">
<textarea className="input-form"
placeholder="Your message..."
ref="newMessage"
onClick={this._onKeyDown}
autofocus="true" ></textarea>
</div>
CSS
.chat-form {
::-webkit-input-placeholder,
:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder {
color: #ecf0f1;
opacity: .4;
}
.input-form {
-webkit-appearance: none;
-moz-appearance: none;
background: transparent;
border: 1px solid rgba(192,192,192,0.3);
color: #fff;
font-size: 0.7em;
margin-bottom: 0;
outline: 0;
padding: 2% 1% 6% 1%;
position: relative;
width: 85%;
}
textarea {
resize: none;
}
}
and the JavaScript part
_addMessage () {
let input = this.refs.newMessage.getDOMNode();
this.props.onAddMessage(input.value);
input.value = '';
input.focus();
}
You need to cancel the keydown event when they hit enter.
https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
I followed a SO question on how to create a placeholder for div[contenteditable].
My code looks like: http://jsfiddle.net/sdxjgkzm/
$('div[data-placeholder]').on 'keydown input', ->
if (this.textContent)
this.dataset.divPlaceholderContent = 'true'
else
delete(this.dataset.divPlaceholderContent)
Unfortunately, the problem is that as you can see the standard input's placeholder stays until you begin typing, while the contenteditable's goes away as soon as you click inside.
How do I fix this?
change your html a bit then use the below css:use placeholder instead of data-placeholder i.e. without data attribute.
input,div {
border: 1px black solid;
margin-top: 20px;
}
[contenteditable=true]:empty:before {
content: attr(placeholder);
}
<input placeholder="test"/>
<div contenteditable='true' placeholder="test"></div>
Check this out, CSS only :)
Placeholder support for contentEditable elements, without JavaScript
Updated Fiddle: enter link description here
All you need is to add the following CSS:
[contenteditable=true]:empty:before {
content: attr(placeholder);
display: block; /* For Firefox */
}
/* General Styling for Demo only */
div[contenteditable=true] {
border: 1px dashed #AAA;
width: 290px;
padding: 5px;
}
pre {
background: #EEE;
padding: 5px;
width: 290px;
}
<h3>Placeholder support for contentEditable elements,<br>without JavaScript!</h3>
<h5>Demo:</h5>
<div contenteditable="true" placeholder="Enter text here..."></div>
<p>All you need is to add the following CSS:</p>
<pre>
[contenteditable=true]:empty:before {
content: attr(placeholder);
display: block; /* For Firefox */
}
</pre>
<h5>Notes</h5>
<ul>
<li>Can add a different style than actual text like opacity, italic, etc</li>
<li>If your html needs to be 100% compliant, you can replace "placeholder" for "data-placeholder" on both files</li>
<li>Chrome will add <br />'s inside contentEditable elements in some cases, breaking the :empty check. Can be fixed with a bit of JavaScript.</li>
</ul>
<i>By Ariel Flesler</i>
When you open this page (see Live demo) with Chrome :
<span id="myspan" contenteditable=true></span>
CSS :
#myspan { border: 0; outline: 0;}
JS :
$(myspan).focus();
the contenteditable span has focus (you can start to write things and you will see that it already had focus), but we don't see the "I" edit cursor.
How to make that this cursor is displayed ? (Remark : outline:0 is needed, as well as the fact that the span is empty even with no white space).
Note : With Firefox, the cursor is displayed.
The problem is that spans are inline elements. Just add display:block; to your CSS and it will fix the problem.
$(myspan).focus();
#myspan {
border: 0;
outline: 0;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<span id="myspan" contenteditable=true></span>
I added padding to the left and the cursor appears.
#myspan
{
border: 0;
outline: 0;
min-width: 100px;
height: 30px;
padding-left: 1px;
}
Demo in jsFiddle
.cont_edit {
outline: 1px solid transparent;
}
This just has to do with the way an empty ContentEditable area is rendered. To prove it's not about the focus, add some text to your editable div, and then delete it. When the last character is gone, the cursor will disappear
From the question Setting the caret position to an empty node inside a contentEditable element
The selection/range model is based around indexes into text content, disregarding element boundaries. I believe it may be impossible to set the input focus inside an inline element with no text in it. Certainly with your example I cannot set focus inside the last element by clicking or arrow keys.
It almost works if you set each span to display: block, though there's still some highly strange behaviour, dependent on the existence of whitespace in the parent. Hacking the display to look inline with tricks like float, inline-block and absolute position make IE treat each element as a separate editing box. Relative-positioned block elements next to each other work, but that's probably impractical.
You could also try adding a zero-width character like
document.getElementById('myspan').focus();
#myspan {
border: 0;
outline: 0;
}
<span id="myspan" contenteditable="true"></span>
The solution was to change <span> to <div> (I've seen that this solves many contenteditable problems in other questions here and there) + to add a min-width.
Indeed, with the following code, the size of the <div> would be 0px x 18px ! That explains why the caret (edit cursor) would be hidden !
HTML
<div id="blah" contenteditable=true></div>
CSS
#blah {
outline: 0;
position: absolute;
top:10px;
left:10px;
}
JS
$("#blah").focus();
Then, adding
min-width: 2px;
in the CSS will allow the caret to be displayed, even with Chrome : http://jsfiddle.net/38e9mkf4/2/
The issue I faced on Chrome v89.0.4389.90 was that contenteditable fields would sometimes show the blinking caret on focusin and sometimes not. I noticed it always blinks when there's already content in the field before focusing. It's when there's no content that the sometimes will/won't behavior occurs.
At first, I thought there must be some conflicting event handler that's erratically taking focus away. I disabled all my event binds and timers. Still the same erratic behavior. Then I thought it might be some conflicting CSS, so I disabled all stylesheets. At least now the behavior was consistent: the caret blinks 100% of the time when the field has content; the caret does not blink 100% of the time when the field has no content.
I enabled binds and stylesheets again. My div was already set to display: block; with min-width, min-height, and padding set in the final computed style set. None of the other answers here worked. I do have a placeholder on :empty:before that was a possible culprit. I commented that out. Now the behavior was consistent again, same as if the stylesheet was off. Oddly enough, the runnable snippet on SO works with the same computed CSS stack. I want to keep the placeholder, so it requires further research with my actual codebase...
The only solution I could get to work 100% of the time with my current issue involved forcibly placing the caret inside empty fields by creating a blank space and removing it immediately afterwards. Best I can do for a workaround until debugging the root cause.
//force caret to blink inside masks
let force_caret = function() {
if (!this.textContent) {
this.textContent = ' ';
let r = document.createRange(),
s = window.getSelection();
r.setStart(this.childNodes[0], 0);
r.collapse(true);
s.removeAllRanges();
s.addRange(r);
this.textContent = '';
}
}
//binds
let els = document.querySelectorAll("[contenteditable]");
for (let i = 0; i < els.length; i++) {
els[i].addEventListener('focusin', force_caret, false);
}
/* styles irrelevant to the issue, added for visual assist */
:root {
--b-soft: 1px solid silver;
--bs-in: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
--c-soft: gray;
--lg-warm: linear-gradient(30deg, rgb(254, 250, 250), #eedddd);
}
body {
font-family: system-ui, -apple-system, -apple-system-font, 'Segoe UI', 'Roboto', sans-serif;
}
[contenteditable] {
outline: initial;
}
[contenteditable][placeholder]:empty:before {
content: attr(placeholder);
color: var(--c-soft);
background-color: transparent;
font-style: italic;
opacity: .5;
font-size: .9em;
}
.input {
border-bottom: var(--b-soft);
padding: .2em .5em;
}
.input_mask {
display: flex;
align-items: baseline;
color: var(--c-soft);
}
.mask {
box-shadow: var(--bs-in);
border-radius: .2em;
background: var(--lg-warm);
font-weight: 500;
border: 1px solid transparent;
text-transform: uppercase;
/* styles possibly relevant to the issue according to other proposed solutions */
margin: 0 .4em .1em .4em;
padding: .2em .4em;
min-width: 3em;
min-height: 1em;
text-align: center;
}
<div data-type="tel" data-id="phone" class="input input_mask">
<span>+1 (</span>
<div maxlength="3" contenteditable="true" placeholder="111" class="mask"></div>
<span>)</span>
<div maxlength="3" contenteditable="true" placeholder="111" class="mask"></div>
<span>-</span>
<div maxlength="4" contenteditable="true" placeholder="1111" class="mask"></div>
<span>x</span>
<div maxlength="5" contenteditable="true" class="mask"></div>
</div>
Add a CSS style of
min-height: 15px;
you may also need
display: block;
to your contenteditable="true" tag
For me setting it content of contenteditable div to <br> works. I tried setting it to nbsp; but that creates extra character space in the div before i start editing. So, i choose this:
<div id="blah" contenteditable=true><br></div>
over:
<div id="blah" contenteditable=true>nbsp;</div>
Hope this helps.
I use Chrome and your Code works fine.
Try to use cursor: text; in your CSS. See here