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;">
Related
Alright for some reason I need to have an input field, which fills when a checkbox is ticked. The input field takes the value of the checkbox as input. After that I need to put the value in another input field which is readonly and is styled to NOT look like input (don't ask), but if the value is longer than the field, the text is partially shown.
Now I have seen some code, which helps in similar situations like here, but it helps only when text is entered in the field. I need it to change according to the already entered value.
I have this:
<input type="checkbox" id="single_room" value="Single room"/>
<input type="text" name="single_room_input" id="single_room_input" style="display: none;">
The value is then submitted and processed with php and displayed again in the other input field:
<span class="text">
{$single_room_input}
</span>
<input class="overview-data" name="single_room_input" value="{$single_room_input}" readonly>
and if I use
$(function () {
$('.overview-data').on('input', function ()
{ $('.text').text($('.overview-data').val()); });
});
It does not resize the input field unless you actually input something in.
If someone can please tell me if it is possible and if yes - how to do what I need to do I would be rally grateful.
So if I understand it correctly you have a checkbox that contains a value. When you click that checkbox an input field is filled with the value of the checkbox and also another READONLY input field is filled with that same value?
You could just do the following then:
$(document).on("click", "#single-room", function() {
var checkboxValue = $(this).val();
$("#single-room-input").val(checkboxValue);
$("#your second input field id").val(checkboxValue)
//then do .css to style the length
});
I'm trying to use a checkbox to disable and enable a textarea, toggling text in the box at the same time. My only issue is that I can't retain the changes that I make when the textarea is enabled. The textarea is disabled initially and holds initial text. After the textarea is enabled, the text becomes editable. If the checkbox is re-checked, the changes disappear and the orginal text re-appears-- toggling back removes the changes (which is not what I want). I'd like to toggle the text back and forth, but without removing the changes. I believe that the best way to do this is to retain the changes in a variable? I've copied the code below:
function toggleDisabled(_checked) {
document.getElementById('tjh').disabled = _checked ? true : false;
document.getElementById('tjh').value= "initial text";
}
<form>
<input type="checkbox" checked name="name1" onchange="toggleDisabled(this.checked)"/>
<textarea disabled name="name2" id="tjh">initial text</textarea>
</form>
You don't need to read the value from the textarea and store it into a variable every time the checkbox is checked or unchecked. You also don't need to (or should) set the initial value for the textarea in your javascript. Set the initial textarea content in the HTML and then use javascript to attach event listener to the checkbox that will add/remove the disabled attribute from the element based on whether checked or not.
You can use the onChange attribute on the HTML element and pass in a javascript function as you originally had, but IMO doing so unnecessarily couples the HTML and Javascript together; making it harder to make changes and read.
<form>
<input type="checkbox" checked name="name1" id='name1' />
<textarea disabled name="name2" id="tjh">Initial text</textarea>
</form>
<script type='text/javascript'>
// Grab HTML elements by element's id
var txtBox = document.getElementById('tjh');
var checkBox = document.getElementById('name1');
var customText = 'initial text';
// Attach event listener to checkbox
checkBox.addEventListener('click', function(evt, el) {
// If checked, then save current textarea value and disable textarea
if (evt.target.checked) {
customText = txtBox.value;
txtBox.value = 'initial text';
txtBox.setAttribute('disabled', evt.target.checked);
}
// Otherwise restore text and reenable the textarea by removing disabled attribute from HTML element
else {
txtBox.value = customText ;
txtBox.removeAttribute('disabled');
}
}, false)
</script>
EDIT: Added customText variable to store/restore txtBox values on disable/enable of checkbox
If I'm understanding correctly, can't you just store the text in a variable?
I have a search form that is controlled by some events, when it is blurred, the function checks to see if the value is blank, if it is, it puts the default search text back in place.
Here is a link to a sample page:
http://merkd.com/community
Here is the relevant function:
// searchInput is a jQuery reference to the <input> field
// searchTextColor is the original font color of the unfocused form
// searchText is the original search text
$('#header form').on('blur', 'input', function() {
searchInput.css('color', searchTextColor);
// When I comment these lines out, it doesn't move
if ( searchInput.val() == '' ) {
searchInput.val(searchText);
}
});
To see the glitch, type some text into the search field, then delete it and blur the search form, the input field will move to the left.
Any idea why this would be happening? Like I said, if I don't change the text then it doesn't move. I don't know how this would be affecting the position of the element within the page.
Problem
this is happen that's why the problem is occur
see in firebug
<input type="text" value="Search Teams, Players, Etc." name="search">
<img title="Search" alt="Search" src="/engine/themes/img/search.white.focus.png">
<input type="submit" value="Search Teams, Players, Etc.">
solution
$('#header form').on('blur', 'input[name=search]', function() {// not use input other wise valuse also set in submit input box
searchInput.css('color', searchTextColor);
// When I comment these lines out, it doesn't move
if ( $(this).val() == '' ) {
$(this).val(searchText);
}
});
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/
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).