I know I can disable/lock part of an input box using
<input type="text" disabled="disabled"/>
or
<input type="text" readonly="readonly"/>
but I want to have
<input type="text" value="[[inputbox|edithere]]"/>
where the user can only edit edithere
I have tried to google this, however the only related things I can find are how to disable an input box completely or disable certain keys.
I don't know the input boxes id or how many there are (dynamically created via php onload), but I know that they will always be a pipeline and two ]] bookending the value I want to edit.
EDIT
http://jsfiddle.net/7rTMK/
You can't do this with a stock input just manipulating attributes.
However you can simulate this with css and some extra markup:
<div class="wrapper">
<div class="static text">static text</div>
<input class="text" type="text" />
</div>
Position "static text" div on top of the input and add left padding to the input text.
example http://jsfiddle.net/MTEec/
It's impossible. Use a tag to wrap the input, and put the uneditable parts before, or after the input, and style the tag to look like an input, and style the input to match that styling.
If you need the form to send all the data, create a hidden input after your input, and update it's value with JavaScript (to the static and the input's text concatenated) upon changing the value of the main input. That way when the form is sent, the later hidden input with the same name will be used.
While it's not entirely impossible to do, it would be extremely difficult to do and it's a very bad practice to try doing something like that, at least for your use case.
You should obtain the user input without restriction inside your input box, if you want to add square brackets or the such, you can add them later using either Javascript or your service side language.
Alternatively, if you really wish to display the characters inside the textbox, you can use claustrofob's solution and mess around with the CSS.
Related
I have a form where currently the label (span element) is separate from its input (text) field, but as part of a redesign it will move into the input field as a floating label (see jsfiddle below). However we also have a tooltip that shows on hover (onmouseover) over the label, and when the label moved into the input field the hover no longer triggers.
Obviously I could make the entire input field or the encompassing div trigger the tooltip or something to that effect, but that would get in the way of the actual input.
So I am looking for either a way to make it trigger on only the label text within the input field (wherever it may currently be, since it moves slightly based on focus), OR some way to integrate an icon into the input field that would be a static trigger point for the tooltip (which would still require some way of triggering hover on a specific element or limited area within the input field).
Is this even possible, or should I look for an alternative solution involving something outside the field?
This fiddle contains the basic structure and CSS to show what the field looks like: https://jsfiddle.net/xwoczh0a/
<div class="form-textbox">
<input type="text" class="form-textbox-input" name="x" id="x" aria-labelledby="x_label" placeholder=" ">
<span class="form-textbox-label" onmouseover="tooltip.show('Enter tooltip here');" onmouseout="tooltip.hide();" id="x_label" aria-hidden="true">Question goes here</span>
</div>
I hope this makes sense, happy to provide more details if not.
I have a <form> with several text input fields like so:
<input id="reg" type="text" name="reg" style="width: 200px;" class="eztext">
in my <script> section just before </body> I have code to select a font for the all these fields:
var el = document.getElementsByClassName("eztext")
for (var i = 0; i < el.length; i++)
{
el[i].style.fontSize = "30px";
el[i].style.backgroundColor = "#00ff00"; // bright green background as diagnostic
}
When I run this for the first time in a browser with a cleared cache, the form looks exactly as expected with a bright green background and if I enter text in the box then it appears with a big 30px font... However, if I have used the form several times before then it appears the browser has remembered several previous entries, i.e. I see some previously entered text already in the form and if I click on the text field I see a menu listing a variety of previously entered strings.
My problem is that both the background color and the font are clearly being set by some other system, the font is not size 30 and the background is not green. Unfortunately, I do not know what thing is controlling the style of the font. I can't find anything in the documentation about the <input> tag.
Browsers save previous input values for the user out of convenience. However, this should not affect the styling of the element(s) at all.
First check that you do not have CSS that gets overwritten somehow.
Order of CSS, both included and inline CSS.
The !important property.
You also seem to be using unnecessary JavaScript to apply your style(s). Is there any deeper meaning to why you're using JavaScript the way you are? You have the selectors available to you to simply go with a normal CSS solution.
As a last resort, you could go for disabling the autocomplete feature, but that should be your last resort, as it is a quality of life improvement for the user to have that available to them. There are multiple ways to do this, the most simple one would be:
<input id="reg" type="text" name="reg" style="width: 200px;" class="eztext" autocomplete="off">
Or for the entire form:
<form autocomplete="off" action="...">
More about disabling input fields here.
If it's about the background styling of the input fields themselves entirely, you can use -webkit CSS properties to get your desired styles.
More about that here.
Provided by # Ramon de Vries in the comment section
I have a feature in mind for an interface I'm developing but I'm not entirely sure of how to bring it to fruition. I'm basically after an input field with a set of buttons to the side which insert a span/button inside the input to represent the button clicked.
So in a simplified version of my imagined interface, I can type into the field as normal but when I press one of the buttons to the side, they also insert text into the field. Let's say if I press button 1 it inserts the text "Hello" and button 2 inserts the text "Emma". Fairly easy.
The more complex version which I want to create works similarly, but when I click button 1 it inserts a bubble inside the text field. The bubble has its own background colour, contains the word "Hello" and has a small x in the top right to dismiss it. When the bubble is inserted it moves the carat on past the inserted bubble and I can continue to type as normal. If I hit backspace when the carat is to the right of the bubble, it deletes the entire bubble at once. Here's a simple example image:
I feel like I've seen this kind of thing on the internet a lot but I can't work out how it's done. Is there a way to pull this off with an input field? If it's not possible which alternatives should I be looking into?
I don't think you can do this with just an input unless you go change the standard implementation of input for your page :)
I think your best bet would be to have a structure like this:
<div class="wrapper">
<div class="shownContent">Is that <div class="tag">Emma</div></div>
<input class="underlyingInput"/>
<div class="tagsButtons" />
</div>
undelyingInput is hidden - available but hidden.
Style shownContent to look like an input.
You then handle clicks on shownContent: if they click shown content, focus the hidden underlying input, BUT show shownContent as focused.
Now if the users start to write after they clicked on shownContent, that text is actually going into the input!
When value changes in the input, use the new value to parse it into text and tags, and set the html content of shownContent
Once you got this, removing tags from clicks on the left and adding them from clicks on the right should be straightforward.
You could try using a series of inputs, instead of just one:
<div class="wrapper">
<input /> <!-- "Is that " -->
<button>Emma</button>
<input /> <!-- "? " -->
<button>Hello</button>
<input /> <!-- ", " -->
<button>Emma</button>
<input /> <!-- "!" -->
</div>
The wrapper is just for styling purposes: you'd give it a border and make the input elements borderless.
You'd need to override a lot of keyboard commands on the input elements. For example, backspacing at the beginning of that last input would cause the preceding button to be deleted, and merge the contents of the two adjacent input elements.
You'd also need to consider the effect of hitting the Home and End keys (and equivalents in other OSes).
Moreover, you'd wanna make sure the input elements will resize as their contents change. It's a little tricky, but doable!
Here's a jumping off point: https://codepen.io/exonj/pen/jxQxGV
This is a tagsinput. Checkout this
Bootstrap TagsInput. It has the same functionality as you wanted.
I have a form where an admin can add candidates. When I run my application in IE8, and click on reset button, it removes placeholder from all the fields. I am using placeholder.js to support placeholder property in IE8.
Here is my reset function ...
function resetCandidateData(){
$("#addCandidateForm")[0].reset();
}
My form is like that ....
<form name="addCandidateForm" id="addCandidateForm" method="Post">
<input type="text" name="cname" id="cname" class="inputBox bdr-radius5" placeholder="Enter candidate name" autocomplete="off"/>
.....
.....
<span class="global-button" onclick="resetCandidateData();">Reset</span>
</form>
First time when page refresh, it showing placeholder in each of my textfields in IE8 but after reset all are vanish. Please help.
I don't know anything about the specific placeholder.js library that you're using, and you didn't provide a link, so I can't even tell which one it is.
However, it sounds to me like you need to use a better placeholder script.
If resetting the fields clears the placeholders, then it means that the script is using the field value to display the placeholder.
This is fine, but does have some limitations, in particular as you've seen with resetting the fields, but it also means that you can't have placeholders on a password field (because they would show up as stars like the password itself), and you can't easily have the placeholder styled differently to the field values.
For all these reasons, I prefer a placeholder script that uses a different technique - eg putting the placeholder in its own element and displaying it on top of (or behind) the input field, rather than actually using the input field itself for the placeholder.
So therefore my advice is to find an alternative placeholder script. It should be fairly straightforward to take one out and plug another one in, and there are plenty of them out there to pick from. Take a look here for a list of some of the best ones.
Hope that helps.
Change your resetCandidateData function to
function resetCandidateData(){
$("#addCandidateForm")[0].reset();
$.Placeholder.init();
}
It should restore the placeholders.
I need to hide a text input field with javascript. Changing its type attribute to hidden does not work in IE (security issue).
What would be the best way to do it?
Note: No jQuery or other lib can be assumed.
I assume you have to show and hide the text field dynamically based on changing conditions in the form, otherwise you'd just make it an <input type="hidden"... to begin with.
Keep your code that shows and hides the field as it is, but also catch the onsubmit event.
In the submit handler, get your text field via document.getElementById(...) (or by accessing document.forms[i]) and check to see whether or not it's hidden.
If it is hidden, create a new DOM node for an <input type="hidden" ...> field and add that node to the form, probably via myform.appendChild(...). You'll have to give it the name your server-side code expects. Copy the contents of the hidden text field into the newly created type=hidden field, then return from your submit handler, allowing the standard submit to continue.
You could also just un-hide the text field on submit, but you'd have to move it "off screen" also or the user would see it reappear during submit processing.
Try wrapping it in a div or span and then setting the display style to none when you want to hide it, and then to block (if you used a div) or inline (if you used a span) when you want to show it.
document.myform.myelement.style.display = 'none'
works as expected even in Internet Explorer.
The only way you can change it is before you append it to the DOM. You can make a new element and then replace the current one with it.
Look at replaceChild and createElement since you want to do manual DOM scripting. I assume you know what to do.
EDIT: "Hidden" fields as far as I know are sent. Have you checked whether they are? And you can also just do position:absolute; left:-9999em; to offset them.