I have two label elements. I want the first one to be shown all the time but the second one needs to be hidden on focus.
How I can get this result with jQuery?
<dd>
<label for="checkcode" class="check_label">=</label>
<label for="checkcode" class="checkcode_label">enter code</label>
<img src="/captcha" id="captcha" />
<input id="checkcode" type="text" name="checkcode" value="" />
</dd>
I need to use the two defined "label" to get the needed result. Is not possible to set "value".
This label is not necessary use the input and CSS for styling. If your target browser is modern capable use placeholder attribute, and css :focus to change style on input:
When input is not focused
.checkcodeClass {
border : 0;
}
When focused
.checkcodeClass:focus {
border : 1px solid black;
}
For browsers that not support placeholder:
Use jquery to put placeholder https://github.com/danielstocks/jQuery-Placeholder
For browsers that not support CSS :focus:
Use jquery 'on' with blur and focus to alternate class.
Use focusin() function.
$('label.second').focusin(function(){
$(this).addClass('notShown');
})
$("#checkcode").focus(function(){
if( $(this).val() == "enter code" ){
$(this).val("");
}
}).blur(function(){
if( $(this).val() == "" ){
$(this).val("enter code");
}
});
Example.
We're emptying the value attribute of the input when it gains focus and setting it back to "enter code." It's a bit more complex than that because we are checking to see if the value is currently "enter code" when it gains focus (in which case it empties it, otherwise it does not, which keeps user entries in there if it gains focus again). When it loses focus, we are checking to see if it is empty, in which case we change it to "enter code" (this keeps user entries in when it loses focus).
Related
I want to add a button property to an entry. For example;
I have an input field that cannot be edited:
When I press the keyboard button it becomes editable:
When the user clicks on the entry field without the need for a different button, it must run a different function. For example barcode scanner. Can an input that is not editable trigger a function? Or can an editable input trigger any function? How do I do this?
As in this application, the barcode event should be triggered by the input field, not the button.
As mentioned in my comment, the UX of the current approach in the question is highly questionable:
It's missing a signifier. There is no clear indication that only that non-editable field - in contrast to all other non-editable ones - triggers something once clicked.
Users, who'd prefer entering the barcode manually, would need to click on the keyboard-button first to make the input field editable, and then, once again, click on the input field to enter data.
Instead, consider to offer both options (entering manually and triggering the camera to scan) within a single input field via its value-help (F4) action:
sap.ui.getCore().attachInit(() => sap.ui.require([
"sap/ui/core/Fragment"
], async (Fragment) => {
"use strict";
const control = await Fragment.load({
definition: `<form:SimpleForm xmlns:form="sap.ui.layout.form"
xmlns="sap.m"
editable="true"
layout="ColumnLayout">
<Label text="Barcode Number" />
<Input width="12rem"
textAlign="Center"
placeholder="XXXXXXXXX"
showValueHelp="true"
valueHelpIconSrc="sap-icon://bar-code"
valueHelpRequest="alert('Scanner triggered!')"
/>
</form:SimpleForm>`,
});
control.placeAt("content");
}));
<script id="sap-ui-bootstrap"
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.core,sap.m,sap.ui.layout"
data-sap-ui-async="true"
data-sap-ui-theme="sap_fiori_3"
data-sap-ui-compatversion="edge"
data-sap-ui-excludejquerycompat="true"
data-sap-ui-xx-waitfortheme="init"
></script>
<body id="content" class="sapUiBody"></body>
The value help icon can be set to a barcode one by assigning "sap-icon://bar-code" to the valueHelpIconSrc property (available since v1.84.0) in sap.m.Input.
This approach is beneficial for both - users and developers - because the behavior is now consistent with common user input scenarios, improving familiarity, and for developers, it highly reduces maintenance costs since there is less customization.
If the target UI5 version is lower than 1.84.0 or if the barcode has a fixed length, the control needs to be extended with the method addEndIcon. I explained this in another answer. Here is an example with an extended sap.m.MaskInput:
See https://embed.plnkr.co/EzlF2tkvalJWvSEn?preview
If your non-editable input is non-editable because it has a disabled attribute, you can't attach mouse events to it. (Actually you can, but it won't fire mouse events.)
If you want to fire a click event, you can add the event listener to a parent element, like a div in my example below.
Although it works in Chrome without it, you also need to set pointer-events to none on the input to make the clicks fall through to the parent element in Firefox.
const parentDiv = document.querySelector("div");
const input = document.querySelector("input");
parentDiv.addEventListener("click", (e) => {
input.removeAttribute("disabled");
input.focus();
// or you can open the barcode scanner, etc.
});
input {
font-size: 2rem;
padding: 0.5rem 1rem;
}
input[disabled] {
pointer-events: none;
}
<div>
<input type="text" value="disabled field" disabled>
</div>
It could also work with label if the label contains the input:
<label>Barkod No:
<input type="text" value="disabled field" disabled>
</label>
Try this, replacing the displayDate funcion with your own enable function:
document.getElementById("myBtn").addEventListener("click", displayDate);
Which then calls the CSS change:
input[type="text"]:enabled {
}
https://www.w3schools.com/js/js_htmldom_eventlistener.asp
I want a text input selected (as if I had clicked on) when I click on another element on the page. I can't figure out how to do it?
You are looking for this: pure js way
<img src="http://placehold.it/350x150"
onclick="document.getElementById('target').focus(); return false;">
<input type ="text" id="target"/>
Clicking on image will set focus on the text field.
Assuming that your input field has id #input then solution would be
// Wrapper function needed to ensure that DOM elements have been already rendered.
(function() {
$( '#input' ).focus(); // jQuery
document.getElementByID( 'input' ).focus(); // VanillaJS
})();
Try this. I have not tried it though. It's worth noting that it is based on jquery.
//set focus by default
$("your_input").focus();
//if the focus is lost set it again
$("div").focusout(function(){
$("your_input").focus();
});
Scenario: When an input field is set .readOnly = true, the text cursor is replaced with the pointer arrow cursor and the input field cannot be entered or modified. However, clicking into such a readonly input field with text in it does actually register the cursor's location within the text, even though the display does not show the clicked location by visually rendering a text cursor caret, like a read-enabled input field would.
Here's the question: Is there a way to force the text cursor caret to appear in an input field set .readOnly = true, in other words, as if the input field were actually read enabled, but still keep the input field readonly?
What you want to achieve is actually an existing bug in few browsers.
Check this answer
But you can achieve this by below workaround.
Remove readOnly attribute and try with below code
$('document').ready(function() {
$('input[type="text"]').keydown(function(e) {
return false;
});
$('input[type="text"]').bind("cut copy paste", function(e) {
e.preventDefault();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" value="some value" />
You can do this with css :
input[readonly] {
cursor: text;
}
or
<input type="text" style="cursor: text;">
I am doing some website where I have a login form. I know people can save their usernames and passwords on these in their web browsers.
I need to show / hide a label (<label></label>). if the field is empty then the label has to appear, if there is any value in the field then the label has to hide,
but this doesn't work with the browser autocomplete, is there anyway I can track this?
I tried with:
jQuery.change();
but that doesn't work.
Is there anything I can do about this rather than turning autocomplete off?
The norm here is to use the placeholder attribute on the relevant input element:
<input type="text" placeholder="username">
username will be displayed within the input when there's no text, and hidden otherwise. If you're using this, then you should probably also use something like Modernizr to detect support and create a normal text label otherwise.
You have to manually trigger the change event:
$("#username")
.change(function () {
// do stuff on change (check for default)
})
.trigger("change");
or use some watermark library if you only want to toggle default text (or the placeholder attribute with Modernizr as aviraldg recommends).
This is very simple.
I use this for my site's text fields.
This coding is in Javascript text.
create a <form> with name and id = "comform" (you can change this later; just for reference).
create an <input type = "text" with name and id = "Message" (you can change this later; just for reference).
create a <div> with id = "ifsend" (you can change this later; just for reference).
Also create a variable to store the length in. var numbering (you can change this later; just for reference).
function counter() {
var numbering;
numbering = document.forms["comform"]["Message"].value.length;
if (numbering == 0) {
label();
}
if (numbering != 0) {
document.getElementById('ifsend').innerHTML="";
}
}
function label() {
document.getElementById('ifsend').innerHTML="Your form value is empty";
}
I have a simple task which I'm failing at.
I want to take this field:
<input id="amount" name="amount" value="{$formRefill.amount}" class="textInput auto required validateNumber" type="text">
And once the user has typed a value in there (i.e. 950.50), and they click outside of text field (focus somewhere else), jQuery takes this field and displays it somewhere else on the page.
I was trying to do this inside of a DIV lower down the page.
Thanks.
You need to use change event of the input field:
$('#amount').change(function() {
$('#mydivid').text($(this).val());
});
Code: http://jsfiddle.net/yg9gF/2/
you should use keyup which will update the div on every char entered.
$('#amount').on('keyup',function() {
$('#mydiv').text($(this).val());
});
fiddle : http://jsfiddle.net/yg9gF/11/
you can use the blur() or the change() event. Use change if you want the value to copy only when it has been changed, or blur if you want it to copy regardless.
$('#myText').blur(function () {
$('#myDiv').text($(this).val());
});
http://jsfiddle.net/AAyyq/