Input box text value trick - javascript

I'm looking for a solution where I could have an input box that has a value in, and that value cannot be changed, although if a user goes to enter information into that box, they can add say their name along side the value, but the value cannot be deleted.
Here's an example:
First Name:
If a user clicks on that box they can then enter their first name.
First Name: Kate
'First Name' cannot be deleted though and if possible not as a value.
I think this is possible but I can imagine it's a very tricky to do. I saw it on a website once but I can't remember where.

Even if there were possible, and I'm sure it is, you should not do it.
Whenever you manipulate a control so that is serves a purpose other than the purpose that it was designed to serve, it becomes a usability issue. Simply put, you are going to confuse your users.
Use a <label>, or rethink your interface design completely.

You probably can use a mask control or at least same principles. The advantage of this approach is that it covers your needs regarding using a text input and it won't confuse users usability thanks to the _ on the controls which will let users know clearly what can be removed and what cannot.
Here is an example with jQuery-Mask-Plugin
Online Demo
Your html
<input id="txt1" type="text" value="" tabindex="1" />
Your script
jQuery(function($) {
$('#txt1').mask('Something:a*****');
$('#txt1').val('Something:');
});
Disclaimer: Even though I used jQuery Mask plugin I am no saying it will be the right choice for your application or the only choice but I think it can guide or give you ideas on how your problem can be resolved.
Hope it helps!
http://jsfiddle.net/5QWqH/

Create a background image which contains the text "First name" and apply it to the text box. Add some padding-left to the box as well.
Note that you should also use a regular label tag for accessibility reasons, but you can hide that using CSS.

Related

Keep placeholder partially while typing in input type text

How can I create a input text in React with placeholder as DD-MM-YYYY,
when I start typing the value, the placeholder should be removed partially.
For eg if I type 02-MM-YYYY(in this case -MM-YYYY should be visible part of the placeholder)
The pattern you are describing is an input mask, so you might have more luck searching for this than placeholder.
First of all, have you considered using <input type="date">? Most browsers also provide an input mask for this kind of input.
If this doesn’t help you, HTML does not provide input mask functionality natively, so you will need to find a library that does that for you.
As always, you should clarify your basic requirements before choosing a library from npm. Most notably, it should be accessible for users with disabilities. Input masks seemingly improve user experience, but they are hard to get right. If not done well, they actually render the user’s experience worse.
Things the input should still support with input mask applied:
(Copying and) Pasting the value from elsewhere
Autofill by the browser (for your birthdate, for example)
Screen readers announce the value correctly
Correcting the value by means of keyboard only, for example deleting one number in the middle
The pattern adjusts with the locale (language)

virtual keyboard popup onfocus of a text field

EDIT: this feat is impossible. since then I have given up. I shall not delete this question, but rather leave it up right here so future users can see a relevant result to their query on google regarding a similar thing
Goal: Either make a textarea bring up the virtual keyboard when focused(with js) OR make a input[type=text] have multiple lines AND bring the virtual keyboard
(I believe answered here but with unsatisfactory results.) (If anyone knows of fully compatible ways to multiple-line-ify an input[type=text] please tell me)
Expected results: virtual keyboard popup when focusing the input OR textarea fields (via javascript with no user trigger).
Real results: caret appears in text field but keyboard remains unseen.
Here's what I'm trying on a textarea:
document.elementFromPoint(document.querySelector("textarea").getBoundingClientRect().x, document.querySelector("textarea").getBoundingClientRect().y).dispatchEvent(click);
Please don't make irrelevant comments about my code organization
#WaisKamal can you show me your code since you said it works?
HTML(no CSS):
<textarea>textarea</textarea>
<input type="text" value="input" />
<script>
//document.elementFromPoint(document.querySelector("textarea").getBoundingClientRect().x, document.querySelector("textarea").getBoundingClientRect().y).dispatchEvent("click");
document.querySelector("input").focus();
document.querySelector("input").click();
</script>
You can use inputmode to determine how a virtual keyboard behaves
<textarea>textarea</textarea>
<input type="text" value="input" inputmode='text'/>
<script>
//document.elementFromPoint(document.querySelector("textarea").getBoundingClientRect().x, document.querySelector("textarea").getBoundingClientRect().y).dispatchEvent("click");
document.querySelector("input").focus();
document.querySelector("input").click();
</script>
Edit
I'm still testing this out, it seem to give some mixed results in the jsfiddle that I'm currently testing right now, sometimes it works and sometimes it does not
*Edit 2 *
It seems to have the same results without specifying the inputmode It does not work the first time the page loads but if I click somewhere on the page, it works every time I click run.
I'm only speculating here but it seems like the keyboard does not pop up without the page receiving some user interaction first, maybe this is intentional for security reasons but I didn't find any docs saying so.
As for you other question you can give a div or other container element contenteditable to have multiple rows / any dimensions you want.
-
Here is another questions and some answers to the same problem though a bit old, Show virtual keyboard on mobile phones in javascript
-
All in all it does not seem possible so show a virtual keyboard without some user interaction.

Input Box Text Grouping Style

I'm wanting to write a a block style input text box. I realized I might not be describing it correctly and if someone could give me the proper name, I would appreciate it. Basically I want the functionality of how GMail uses their email address client:
I don't need the autocorrect functionality, just the part where a user presses the enter key and it places it in a single entity/block and you can continue to type.
I'm sure there are libraries out there but I've had trouble finding them since I don't know what the technical name for them are. Any examples would be appreciated!

Chrome extension on text changed event on text field, then replace text

I'm working on a Chrome Extension which I want to replace certain characters in a specific text field on one specific website. It is basically to change emoticon text (like ":-D") into the proper emoji's, such as "😄". I tried a few things I found online (I'm not very good with JS):
- A MutationObserver and then look for all text fields with a certain name, then replace all emoticons by hand. Didn't really do the job properly and also kept firing up the print window for some reason
- Event listener added with event 'keyup' but it doesn't seem to fire up.
Hope you guys know a good solution!
This question does not give anywhere near enough information to answer. Are you using the program for input fields on the website? What solutions have you tried? Where is the code? Essentially, you are asking us to write the entire program for you. This forum is meant for programming help, NOT doing the entire program for you. You need to fix the question to be more specific.
If you just want to replace text elements, you would have to use the select elements by tag name to select all text elements on the page and then search through each of these for the sets of emoticons. Once finding these, you would have to change the elements inner html to fit the emoticon from UTF-8.

javascript iterate through dom looking for specific aria-label

I've spent hours on this one.
My company is forced to use a non-user-friendly 3rd party website. We only use IE11. My job is to use javascript and jquery to customize the screen and make things a little easier for our users. I use a bookmarklet to insert <script> tags into IE and reference a .js file saved locally.
This website uses hundreds of input text fields but we only need a handful of them. So, I want to highlight input text fields on the screen.
Some fields have ID's some only have Name. For the most part, this works:
$(document.getElementById('s_3_1_18_0').toggleClass("highlightField");
$(document.getElementsByName('s_3_1_19_0')[0]).toggleClass("highlightField");
HighlightField simply adds CSS background-color: yellow !important
The problem is, this 3rd party app changes the ID and the Name in bizarre ways. One day, the name will be 's_3_1_19_0', the next it will be 's_3_2_48_0'. So highlighting using this method is not stable.
However, these fields have an area-label that stays constant. I'm wondering how to use javascript or jquery to iterate through each text box, looking for a specific aria-label. For example, the "valid to" field has a bizarre name that changes all the time but it's aria-label is always "Valid To".
Can anyone please help me with this?
You can find the input with the aria-label "Valid To" by searching for
$(document).find('input').attr('aria-label', 'Valid To');
I recommend being a little bit more specific than $(document), though. That searches the entire doc.
You can use jquery to get the list of all aria-label attributes and use a switch case to perform what you need. Something like this
switch ($(this).attr('aria-label')) {
case 'label1': {
//do something
break;
}
}

Categories