First off, I know this question is similar to: Firefox cache textarea value? but mine is slightly different (I think, I'm very inexperience at HTML).
So I have a
<div class='class'><div id='message'><textarea id="msg">msg</textarea></div></div>
I'm trying to disable caching so that when I refresh, it grabs the textarea concent from the server, not from the browser. But I'm only trying for just this textarea. Unfortunately, the contents of the textarea are generated by code, not hardcoded. Can I stick the "autocomplete=off" attribute in one of the divs and will it filter down to the textarea? Or do I have to find out where the code is generated for the textarea and modify that?
[EDIT] (from comment-has-an-answer)
So because I don't have control over the markup fields, I had to write a jquery that matched the specific textarea ID. Maybe next time people will actually read the question...
As r92 states in this other Stackoverflow answer:
For textarea only:
<textarea autocomplete="off"></textarea>
For all form fields
<form autocomplete="off">
For a javascript solution
document.getElementById( "msg" ).setAttribute( "autocomplete","off" )
For a jQuery solution
$('#msg').attr('autocomplete','off');
Preventing Firefox from remebering the input value on refresh with Meta tag
MSDN Reference and MozillaWiki Reference
The attribute has to be on a form / form-field (never tested) and i don't think this 'attribute' is inherited. So NO, you won't be able to stick it to an outer container.
I am pretty sure autocomplete="off" has to be on the textarea itself. You could apply that post render using javascript/jquery:
$('textarea').attr('autocomplete','off');
All you need to do is to add autocomplete off in your textarea.
So this should stop browser from remembering you info inside of textarea
<textarea autocomplete="off"></textarea>
So because I don't have control over the markup fields, I had to write a jquery that matched the specific textarea ID. Maybe next time people will actually read the question...
Related
Here is the simple form I'll be working from in this question...
<form method="get">
<input type="text" value="test">
</form>
It works fine here or on jsfiddle. Notice how if you click "Run code snippet" and click in the field then the text remains in the field along with the cursor?
However, on my custom WordPress website, the field's value is behaving like a placeholder value. Hopefully these images will demonstrate what I mean by that.
When I click in the field the existing text disappears...
... and when I click away from the field it reappears...
You can see from the form HTML above that the field has a value assigned and does not have a placeholder. My first thought was there must be some placeholder value being assigned dynamically at runtime via javascript. However, Safari's web inspector shows this...
It appears that it's not a placeholder but some Shadow DOM code being added, and that new code is making it function like a placeholder. To view the Shadow DOM code I enabled Shadow DOM in Chrome's web inspector. This is what I found.
When the field isn't highlighted the Shadow DOM shows this...
When I click in the field to highlight it the Shadow DOM shows this...
It appears that something is creating a shadow root and adding this div to it...
<div id="inner-editor"></div>
Then it's setting the innerHTML of that div to "" or "test" based on the highlight state.
I don't work with the Shadow DOM much and I'm not sure how to determine where this code is coming from. I've searched my entire code base through the web inspector and done several different recursive grep (e.g. grep -r "inner-editor" *) from the root of my project to try to find any code in the css, javascript or php that might be adding this Shadow DOM code at runtime. There are no instances of "createShadowRoot" or "inner-editor" or "parent-focus" or "parent-active" or "text-active" anywhere in my project. I'm not sure if these might be coming from the browser code itself or through some obfuscated code from one of the js libraries I'm using like jQuery, or a dynamic browser rewrite of some library code.
How can I get this text field to behave normally on my site rather than like an empty text field with a placeholder value?
Thank you for taking the time.
After spending hours disabling and enabling wordpress plugins, swapping out jQuery library versions on the site and dealing with the accompanying theme compatibility issues, I finally found the offending line of code in my theme's jquery.main.js file. Here it is...
// clear inputs on focus
function initInputs() {
PlaceholderInput.replaceByOptions({
// filter options
clearInputs: true,
clearTextareas: true,
clearPasswords: true,
skipClass: 'default',
// input options
wrapWithElement: false,
showUntilTyping: false,
getParentByClass: false,
placeholderAttr: 'value'
});
}
replaceByOptions calls several other functions but the fix is available in the Boolean settings above. Changing clearInputs and clearTextareas to false fixed the problem. I hope this helps someone else experiencing the same issue.
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.
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'm trying to make something similar as in stackoverflow where you add keywords.
I'm just stuck with the HTML part or javascript?
When a keyword is found an clicked, how do i make it fixed in the input field? Like in stackoverflow it becomes blue with a remove button next to it.
Currently the results are being showed underneath the <input>, in a new <div>.
<fieldset>
<label for="title">Add keyword<label>
<input class="input" type="text" size="30" onkeyup="searchFunction()" onkeydown="searchFunction()">
</fieldset>
<div id="livesearch"></div>
It's not a real <input> element. It's just looks like input. You should use regular <div> and append (for example) stylised <span> to it.
Try out this plugin for jQuery https://github.com/xoxco/jQuery-Tags-Input .
You can use jQuery.autocomplete.
I'm using this plugin in production and it's ok.
Look back at this SO question:
jQuery autocomplete tagging plug-in like StackOverflow's input tags?
the dude that answeres suggested
(demo) https://github.com/aehlke/tag-it
and much more. check it out you might find a solution that suites you the best!
There is no "easy" way to do it, you will need more then just a <input> to achieve this kind of behavior.
However, there are some good plugins using jQuery (don't know any made with plain javascript) which already made this:
TextExt
TokenInput
VisualSeach
Little late to the party but I created one as a React component. The underlying code is plain javascript (no jQuery), so should be easy to decipher.
sterlingwes/react-taginput
See the taginput.jsx file for an idea how it works.
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