im using Span text fields, and i want it to be cleared when clicking on them, how do i do?
My code looks like this:
<div class="text3">
<span contenteditable="true">något</span>
</div>
How would you edit the text if you clear it everytime you click ?
Anyway here is a trick :
<div class="text3">
<span contenteditable="true" onclick="this.innerText=''">något</span>
</div>
Use the node’s textContent property to set the “inner” text, which is the actual text node.
To clear the text when the span gets the focus for editing its content, use the onfocus attribute to set an empty string:
span{
display:inline-block;
min-width:30px;
min-height:18px;
outline:1px dotted grey;
}
<div class="text3">
<span contenteditable="true" onfocus="this.textContent='';">något</span>
</div>
Since the content will be set to empty string, the <span> inline element will be nearly invisible without entering any text. You probably should add some visual to the interface in order to guide the user. The above CSS will keep it at arbitrary minimum dimensions, adding an outline to keep the “input” from disappearing.
Also, you could select the text content instead of removing it. Unfortunately, it seems the Range interface doesn’t work for contenteditable non-input elements, so that’d be qualified for another question.
Related
When the cursor is on the 2nd span, the photo will change and when the cursor is moved, the old photo will come.
This will require a little bit of JavaScript, but it can be put in your HTML document. The span tag can have a hover event call the JavaScript to change the image. Here is a simple example.
<img id="sampleImg">
<span id="span1" onmouseover="document.getElementById('sampleImg').src = 'image1.gif'"> Span 1</span>
<span id="span2" onmouseover="document.getElementById('sampleImg').src = 'image2.gif'">Span 2</span>
The image source paths will need changed to fit your needs, but otherwise this should be able to be implemented into your code. The onmouseover event in the span tag contains the JavaScript to change the given image's source.
I hope this solved your issue!
I'm attempting to make a span tag un-deletable inside a 'contenteditable' div:
<div contenteditable>Editable <span contenteditable="false">Read Only</span></div>
The read only span is indeed read only, but I can delete the whole span with a single delete press. Is there an attribute way to tell the span that it is not deletable?
Make the div position: relative and the span position: absolute. This takes the span outside the normal document flow, still inside the div, but unable to be altered or removed:
div[contenteditable] {
position: relative;
}
div[contenteditable] span {
position: absolute;
margin-left: 1em;
}
<div contenteditable>Editable <span contenteditable="false">Read only - Can't touch this </span></div>
So I figured out the best solution for me, very simple. A content editable div in not needed. Just a a few content editable spans.
<div>
<span contenteditable="true">
Editable text here.
</span>
<span contenteditable="false" style="font-weight: bold">
READ ONLY VALUES
</span>
<span contenteditable="true">
Edit more stuff here
</span>
</div>
…still lets me delete the span (but not edit it).
You can't achieve this via the contenteditable attribute alone. It is working as intended. The contenteditable attribute does what it says: it allows someone to edit the content of the element.
Consider a jar with jam, inside a box which says you can change the content of the box. The jar has a label which says "you may not change the jam in this jar". This rule does not forbid you from throwing said jar into the trashcan because you never actually change the content of the jar by doing so.
I suggest, like Noel Widmer did, that you try to find another solution to your problem. If you can provide a high fidelity example we might suggest some alternatives.
are you using jquery. use this code on click span :
$(this).click(function(){
$('span').remove();
});
Here's some example HTML and CSS to show the problem:
<p>thisssssssssssss issssssssss a test</p>
<p>thisssssssssssss <span>isssssssssss another</span> test</p>
<p>thisssssssssssss <button>isssssssssss another</button> test</p>
button { display: inline; }
Try it out on this JSFiddle, by resizing the output area.
Result (in Chromium on Ubuntu):
As you can see, there is a line break before the <button> in the third example, which I am trying to avoid. The character seems as if it is being ignored (treated as a regular space). The desired result is that there is no break between "this" and "is," just like the first two examples.
I've already found Why do inline-blocks break after non-breaking space?. An answer there suggests using <nobr> or white-space: nowrap. However:
I'm setting the <button> to display: inline, so I don't even understand why the problem exists anymore since it's an inline element.
I need a pure CSS solution, without any extra HTML in the text before the button. My HTML has to look something like this:
<p>{{SOME TEXT}} <button>foo</button></p>
and I don't know whether the {{SOME TEXT}} will contain spaces or not. I can add extra HTML around the text, but the solution linked in the answer above requires adding an element within the text itself.
Why is the problem happening even when setting display: inline;, and how can I solve it without modifying the text itself?
Can you put a span before the nbsp?
<p>thisssssssssssss<span id="b"> <button>isssssssssss anotherrrrrrrrr</button></span> test</p>
#b {
white-space: nowrap;
}
http://jsfiddle.net/bggk33du/10/
I need to know if any CSS Ninja out there can school me on how to do this. I have set up a JSFiddle with an example of what I am seeing.
It is a test area that has two line in it. Neither of the lines word wrap, but neither of them will ellipsis like I am asking them to. Perhaps it isn't possible.
http://jsfiddle.net/aaronfrost/PjuFB/
Is it imperative that you use a textarea itself?
You can make that one work using a contenteditable div and p tags for the lines
<div contenteditable="true">
<p class="wtf">
WHAT IS HAPPENING asdfkjas dflkasd jfalskdfj asldkfj asldkf
</p>
<p class="wtf">
SECOND LINE and it also needs to have an ellipsis
</p>
</div>
View fiddle here
I'm working with an <input> field and I'd like to style part of the field as the user's typing in a different color. For example, let's say the <input> has a style declaration of color: red; and I want to change part of it to color: blue;. Is there any way this is possible?
If there isn't (as I suspect), any creative ideas on how I can simulate this effect while still preserving semantic mark-up?
Your suspicions are correct: styles will apply to the whole input only.
As styles can apply to the entirety of an element only, a solution will require at least one element per required colour.
Consider the division of the input field with respect to the point at which the user is making changes. There are three sections of the input:
that before the point at which changes are being applied
that after the point at which changes are being applied
that at the point the changes are being applied
You cannot achieve this with a single input element. And as the point at which the changes are being applied can change, the portions of the 'input' wrapped by the three elements will also change. JavaScript is required for a solution.
You should initially include a regular input element and forgo any of the required colouring. Use JavaScript to replace the input with a suitable container element. This can be styled to mimic an input element.
As changes occur, use JavaScript to identify the above-mentioned three divisions. Wrap them in suitable elements (spans would be ideal) and colour as needed.
Consider the following starting point for the generated replacement markup:
<div class="input">
<span class="nonEdited before">foo</span>
<span class="edited">fizz</span>
<span class="nonEdited after">bar</span>
</div>
Use click, keydown and keyup events to figure out the three divisions for the input and to apply wrap the three portions of the faked input as required.
As others have said, you can't do this with styles and static markup.
You could probably do it with a Flash-based form.
But, if I had to this, I'd use jQuery to overlay divs, with the colorized text, atop the <input>.
Algorithm:
Use a normal <input> with whatever default styles are desired. The contents of this input will never change except by user action.
jQuery monitors that <input>. When it detects trigger word(s), it adds a <div> after the input and fills it with the trigger word(s) -- styled as desired. Probably one <div> per word or phrase is best.
jQuery then positions the new <div>, absolutely, directly over the trigger word(s).
Getting the trigger word(s) offset within the <input> might not even be necessary, because the previous words could also be in the overlay <div> -- either styled defaultly or with visibility: hidden.
But, if only the trigger word(s) are desired in the overlay, then using a fixed-width font, like Courier, will help with the sub-positioning.
Take care that the overlay does not interfere with the user trying to mouse or key to certain parts of the <input>. IE, probably don't want to cover any more of the <input> than necessary, and set a click() handler to relay focus.
Alternate, user friendly and simpler approach:
Rather than try to do funky, non-user-expected things to the input, take a page from Jakob Nielsen and from sites like StackOverflow.
Just have a plain ol' <input>, but underneath it, show the formatted text as it comes in.
You can achieve this with (a lot of effort and) a div with the contentEditable attribute present. This is how most web-based WYSIWYG editors achieve rich formatting of inputs. See here for more info: http://ajaxian.com/archives/on-browser-wysiwyg
You can keep differently styled divs side by side in a container overlapped by a transparent input. Modify the widths of the styled divs on the basis of your input entry.
For example, to color input background for leading and trailing spaces:
<div class="bckg-container">
<div id="bckg-leading" class="bckg spaces">
</div>
<div id="bckg-middle" class="bckg">
</div>
<div id="bckg-trailing" class="bckg spaces">
</div>
<br style="clear: left;" />
</div>
<input id="inpt" type="text" placeholder="Add leading/trailing spaces" maxlength="20" />
The three divs inside the container will change their width with input change.
Check the working example in jsfiddle http://jsfiddle.net/TalhaAwan/ywyw4qq5/
You might be able to do it with some edit in place javascript (if it's not possible in pure html/css):
http://www.appelsiini.net/projects/jeditable/default.html
That jQuery plugin doesn't use html input fields so it could be possible to style different parts of the input. It has a couple of hooks for callbacks which you could use to style the input. Hope that helps as an idea.
You can have a label mocking that input and the real input to be hidden, then you can do a lot of things beteen label tags (e.g. colored spans).