Is there a way using angular or just javascript to get the user input text not using HTML input boxes? For example when a user clicks on a paragraph he will be able to change its text without a text area popping so he could input. I tried focusing on angular ngHide element( a input HTML) but with no success. It only focused on the element when its showing.
Try contenteditable introduced in HTML 5.
Try Fiddle.
<p contenteditable="true" onfocus="alert(this.textContent)" onblur="alert(this.textContent)">
Enter Name
</p>
But there is. contenteditable is an HTML attribute that makes divs and cells editable. you can make a directive in angularjs to use that, but beware of the caveats that it introduces.
Take a look at x-editable. It will suit your needs, i think.
Related
I want to have an input field that formats the text that get put into it dynamically. For example I want that every word that begins with an hashtag get turned in bold text. More precisely if I write #todolist some task than this text should instantly look like this #todolist some task
Initially I tried the <input> and the <textarea> elements, but that dit not work at all. I figured out that there is an attribute called contenteditable which allows to edit text inside a <div>. But I wonder if there is a better solution instead of using a <div> element?
Unfortunately, general <input>, <textarea>, <select> and all the other default editable elements are not able to have any other child elements, thus, you can not do the text bold (<b>) or italic (<em>).
The best solution is a <div> with contenteditable attribute.
The article more on the contenteditable:
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content
The value of input or textarea is DOMString.
Value: A DOMString representing the text contained in the text field. MDN
and you can not style (e.g. set font-weight) two-parted text without wrapping it in a DOM element.
Here is another idea which is also feasible:
You can set two input elements side by side, hide all of the native input stylesheet traces, and listen for onChagne values if it starts with # or anything more specific, you can change the style of the first input to bold or any other thing. Then blur the first input and focus on the second input.
there are lots of concerns you should take responsibility for now:
cross-browser UI compatibility for your inputs.
handle UI edge cases for the value that doesn't start with # (maybe setting the width of next input to 0 then).
60 fps animation rate (or UI decomposition) for blur/focus effect.
keyboard will face a flash of close-open in this switching (blur/focus).
I have a pre element that has a bunch of read-only text in it and I now have spell-checking working on the pre. However, if I right-click on the text that has the spelling error, I am able to change the value in the pre element. Is there any way to prevent the auto-suggestion from populating for this element?
Edit: I want to keep the spell-checking. I don't want the user to be able to right-click to auto-correct the mis-spelled word. I do want them to be able to add the mis-spelled word to their dictionary though.
You can use spellcheck=false with textarea and input.
Here is a fiddle with and without spellcheck property it: https://stackblitz.com/edit/react-kmyptb
EDIT:
More info at : https://www.tutorialrepublic.com/faq/how-to-disable-spell-checking-in-html-forms.php
I am making a small text editor, and for that, I would like a similar effect when a user selects some text as here: http://raphaelcruzeiro.github.io/jquery-notebook/
I was thinking of using the jQuery select event, but I can't seem to get it working on divs, only on input fields.
<!--<input type="text" class="writing-area" value="foo bar">-->
<div class="writing-area">foo bar</div>
<script>
$(".writing-area").select(function(){
alert("Text marked!");
});
</script>
You can see a demo here: http://jsfiddle.net/WL2nz/
The outcommented HTML works just fine, but the div version does not.
What am I doing wrong? Can select not be used on divs?
The MDN reference for the select event says that the HTML5 spec only defined the select event for inputs and textareas.
In accordance with jQuery docs, "this event is limited to fields and boxes".
From the jQuery page (http://api.jquery.com/select/) for the .select() function:
"The select event is sent to an element when the user makes a text selection inside it. This event is limited to fields and boxes."
To get the effect you are look for, have you considered onmouseover or onclick with a clickable element?
In addition, the Dojo Toolkit is one place where you can get a nice tooltip to craft something similar to what you are looking for: click here
All answers are correct, but the plugin you have linked to, does it this way:
After using the keyboard or the mouse (keyup,focus,mouseup...) the plugin checks if something is select. If something is selected the bubble pops up.
The code is here
we highlighted the color of div text when hovers it and remove the color while non-hover the text.
$(".writing-area").hover(function(){
$(".writing-area").css('color','red');
},function(){
$(".writing-area").css('color','');
});
http://jsfiddle.net/WL2nz/4/
Is there a Way with Javascript to add Help bubbles over an input Box?
For example when you you hover over an input for Name: _____ it would say like First Name????
Thanks
An example is this https://edit.europe.yahoo.com/registration?.intl=uk
When you go over the name field it says First name in a bubble
Do you mean the title attribute?
<input type="text" title="First Name" />
As said in another answer you can add a title attribute to a html tag to have a tool tip display.
Or if you are after the behaviour where information is displayed somewhere on the page telling you about the text box you have selected you can; dynamically add to a div using document.createElement() and appendChild() when you hover over the element and removing it with removeChild() upon moving your mouse away or change the innerHTML of the html tag on those two events.
Edit:
Unfortunately because I am a 'new' user I can't include all the hyperlinks to each part of the mozilla developer site, but simply search for those functions there for more explnation.
Is it possible to have two styles in an input box placeholder?
Here is an example of what I'm looking for:
http://i.imgur.com/uQ3zf.png
Options would be use a background image that has the text, or use an element overlay with th text or put the text behingd the imput.
Here's a simple demo that places the text behind the input and hides it on focus
http://jsfiddle.net/GRsQc/1/
One solution would be to position text over the input field, obviously it can be styled as pre your example and hide the text using jquery or javascript when the text field is selected. If you want to provide some code I can be more specific.