My problem is that I want to create a Firefox AddOn, and I need to extract from the HTML document every "writable" (I mean: input, textarea or other ways to write text) to work with its value.
I know the method document.getElementByTagName(), but the case is that i don't know how many tags to input text exist (or a webpage usually have on it) to refer them this way; or even if this problem can be solved otherwise.
I really appreciate any help or idea to do this efficently, so I can go forward with this project.
You only have 2 possible tags: textarea and input. The problem is that with HTML5 the input tag has several kinds of types which you can insert text but you have also another ones that you can't (like submit or radio):
color
date
datetime
email
month
number
password
search
tel
text
time
url
You can use document.querySelectorAll function to retrieve those elements:
document.querySelectorAll("textarea input[type=text] input[type=email]");
Note that I have only include text and email in the selector but was just a sample mode. You should add all the types you think necessary retrieve.
Here you have all the possible types for input tag and the browser support of those, I recommend check out the documentation to have a better idea of what tags should be relevant for you.
Related
I am rather curious.
When a member is asking a question in Stack Overflow, within a textbox, the member can enter tags which will change into a graphical form automatically. There is even an 'X' button to the side of each tag which will allow the tag to be deleted.
How is this implemented in HTML? I thought only pure text is allowed in a textbox.
The tag system is quite easy to do with a jquery library. Check these out:
http://xoxco.com/projects/code/tagsinput/
http://aehlke.github.io/tag-it/
https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/
and so on ...
Only text is allowed in a textfield, you're right.
The Tags field, when you're asking a question on this site, is actually a <div> which looks like a textfield. Then, it's a matter of CSS and JavaScript to manage inserting and removing the tags. You could use web-inspector to study the HTML structure and css/js codes.
Viewing source of the tags may give some idea:
i want to suggested text values when user can type the letter in particular text box for example i will type a in my text box it will be retrieve all a value from the database and it suggested (eg: i type "a" means Air, apple, append like that) in mvc 2
You have not posted any code that you tried but if you want from scratch then have a look at following
This Jquery plugin might help you http://jqueryui.com/autocomplete/. On clicking View Source you can get all the code.
You can also have a look at this code http://www.devbridge.com/projects/autocomplete/jquery/
i think this might help. You type in a name and it brings up suggestions from a database.
http://www.w3schools.com/ajax/ajax_aspphp.asp
hope this is what you are looking for
Adding HTML/any tags to either side of selection - Javascript
The problem:
After creating a textarea box in my PHP/html file I wished to add a little more functionality and decided to make an textarea that can use formatting, for example
<textarea>
This is text that was inserted. <b>this text was selected and applied a style
via a button<b>
</textarea>
It doesn't matter what the tags are, (could be bubbles for all that I care due to the fact the PHP script, on receiving the $_POST data will automatically apply the correct tags with the tag as the style ID. Not relevant)
The Question/s
How can I create this feature using javascript?
Are there any links that may help?
And can, if there is information, can you explain it?
EDIT: Other close example but not quite is stackoverflow's editor and note that I do not wish to use 3rd party scripts, this is a learning process for me.
The tags that are inserted in the text are saved to a database and then when the page is requested the PHP replaces the tags with the style ID. If there is a work around not involving 3rd party scripts please suggest
And for the anti-research skeptics on a google search, little was found that made sense and there was Previous Research on SOF:
- https://stackoverflow.com/questions/8752123/how-to-make-an-online-html-editor
- Adding tags to selection
Thanks in Advance
<textarea> elements cannot contain special markup, only values. You can't apply any styling in a textarea.
What you'll need to do is fake everything that a text box would normally do, including drawing a cursor. This is a lot of work, as hackattack said.
You can do a lot if you grab jQuery and start poking around. Toss a <div> tag out there with an ID for ease and start hacking away.
I've never made one personally, but there is a lot to it. HTML5's contentEditable can maybe get you a good chunk of the way there: http://html5demos.com/contenteditable/
If you want to pass this data back to the server, you'll need to grab the innerHTML of the container and slap that into a hidden input upon submission of your form.
Here's other some things you can check out if you're just messing around:
tabindex HTML attribute, to get focus in your box from tabbing
jQuery.focus() http://api.jquery.com/focus/, to determine when someone clicks in your box
cursor: text in CSS for looks http://wap.w3schools.com/cssref/pr_class_cursor.asp
jQuery.keypress() http://api.jquery.com/keypress/, or similar for grabbing keystrokes
Edit: I think I completely misunderstood
If you're not looking for a rich text editor, and just want some helper buttons for code, maybe selectionStart and selectionEnd is what you're after. I don't know what the browser support is, but it's working in Chrome:
http://jsfiddle.net/5yXsd/
you can not do anything beside basic formatting inside a texarea. If you want complex formatting, look into setting a div's contentEditable attribute to true. Or you can make a wysisyg editor, but that is a big project. I strongly suggest using 3rd party code on this one.
I suggest you using the iframe to implement the WYSIWYG effect.
There is a property in iframe called designMode
See here for more
https://developer.mozilla.org/en/Rich-Text_Editing_in_Mozilla
Also there is a lightweight example maybe you would like to take a look:
http://code.google.com/p/rte-light/source/browse/trunk/jquery.rte.js
As far as I know there are two ways to get the value from a textbox either
document.formName.textboxName.value;
or
document.getElementbyId('textboxId').value;
As I understand using form name would mean I have less code to write, as name can be used for posting data and getting the value (apart from using ajax). As where if I was just posting using a standard form I would use name to post but I cannot use id ?
e.g. in php I would use
$_POST['texboxName'];
If I where to have and ID on the textbox I cannot get the value using php ?
Which is the standard recommened way of doing this, and is using name browser friendly? Links if possible please, thanks.
The ultimate guide in this is the HTML specification.
Things that stand out there:
id is valid for any HTML element, while name only applies to a select few (a, input, textarea and maybe a few others).
An input (and textarea) element requires the name to be set if you want it to be submitted.
The name attribute is used during submitting the form, i.e. to create a name-value pair that will be processed to the server. The id attribute is used to locate and element in the DOM. Usually the name is used only on the form elements
References:
http://www.w3.org/TR/html401/interact/forms.html
http://www.w3schools.com/html/html_forms.asp
I typically use both. As you mentioned, name is useful for using the data via JavaScript and also once it has been submitted. Feel free to use additional characters in the name as needed: I tend to use []s in my names when the input will be used in an array server-side.
The id attribute can be used for accessing the element via JS/the DOM. It is also used by <label>'s for attribute. If you do this with checkboxes, for example, clicking on the label will cause the box to become checked. That's a big plus for usability.
I consider it good practice to have a name and id for each form element. The reason being that if you want to add labels, or styling via sytlesheets (which you should be doing), then it makes sense to have both.
As for accessing it with javascript: the better way would be to go with the element's id, becuase if you change the name of the form everything breaks. This does not happen when you use the id.
I prefer using IDs, as the "function" (i.e.: what you're trying to achieve) of your code isn't tied up with in the semantics. For me, .GetElementById('myid') stands out more, and is more readable that just having "myid" scattered among the code. Plus you can more easily rename elements. That's my 2p worth!
I am trying to build a specialized WYSIWYG text editor in the browser, and have a very limited set of functionality, but the biggest part of that is wrapping certain text in span tags.
I can find many resources explaining standard stuff (execCommand and whatnot), but have looked and looked and can't find anything to do what I need.
Basically, it's as simple as it sounds: user selects some text, clicks a button or whatever, and the text gets replaced with some other text (the initial case is that same text wrapped in some HTML tags).
I can find ways to do this in a textarea, but I'm just in regular HTML land, with the content in question inside a div with contentEditable marked as true.
I have also found ways to replace all occurences of text, or the first occurence, but not a specific one. Most solutions I find fail when trying to replace anything but the first occurence.
I'm hoping jQuery can do this in some way.
Have you tried the jQuery wrapSelection plugin?
This is pretty similar to this question. It might help.