I am having a jsp/html page.This page is accessed from two different links.
It is Menu1-->demo.html page and from Menu2-->demo.html page(In my case its jsp)
In the demo.html page I am having a text box which is disabled by default.
<input class="mytextinputtextField" type="text" id="countryOfOrigin"
readonly style="background-color:#DCDCDC" />
Now when the demo.html page is accessed from Menu2 , I am checking it using a hidden parameter and again enabling the text box and setting the focus on the text box.
if(document.getElementById("submenu_name").value=="PM")
{
document.getElementById("countryOfOrigin").focus();
}
The field is enable and the cursor is visible but if I type the text is not typed in the text box.
I need to click on the text box to enter the text.
I think it is because of the disabled and again enabling the field .
Please can any one help me to be able to type in the text box on the focus event from javascript.
I am not using JQuery and the browser is I.E 6
Try this :
document.getElementById("countryOfOrigin").removeAttribute('readOnly');
jQuery version :
jQuery('#countryOfOrigin').removeAttr('readOnly');
Have you tried removing the attribute?
document.getElementById("countryOfOrigin").Attributes.Remove("readonly");
or
document.getElementById("countryOfOrigin").removeAttribute("readonly");
Thank you for your help.
I hav found solution or may say work around.
I am pasting the code which may be useful for others
if(document.getElementById("submenu_name").value=="PM")
{
document.getElementById("countryOfOrigin").focus();
document.getElementById("countryOfOrigin").select();
}
Here is an unofficial solution, we have to use the setTimeout() function to delay the focus() execute time.
setTimeout(function() { document.getElementById('myInput').focus(); }, 10);
See http://www.mkyong.com/javascript/focus-is-not-working-in-ie-solution/
Related
Is it possible to achieve formatting of text in JS alert message?
<script>
function myFunction() {
alert("1.Enter your name. 2. Enter your mobile no. 3.Do not press back
button.");
}
</script>
I want these 3 messages to appear one below the other. I tried:
<p>1.Enter your name.</p><p> 2. Enter your mobile no.</p><p> 3.Do not
press back button.</p>
Didn't work. Also, wish to add this img src tag after the last message:
<img src="http://forums.nextgames.com/resources/emoji/smiley.png" alt="smily"/>
Thank you.
The alert box is a object, and not related to CSS. To do this style of thing you would need to create an HTML element and mimic the alert() functionality. The jQuery UI Modal box does a lot of the work for you.
try adding "/n" before the lines example "\n2", "\n3"
The browser alert box does not support rendering HTML, however you can use plain-text formatting like \n newline and \t tab.
alert("1.Enter your name.\n2. Enter your mobile no.\n3.Do not press back button.");
jsfiddle: http://jsfiddle.net/d1zqsayh/9/
Trying to put the search box of DataTables in a <div>.
Html:
<div class="dataTables_filter">
<input type="text" id="dataTables_filter" class="dataTables_filter">
</div>
Script:
oTable = $('#example').dataTable();
$('#dataTables_filter').keyup(function(){
oTable.fnFilter( $(this).val() );
})
I saw this from another stack overflow post , but unfortunately the little 'X' button on the right of the search box doesn't show when you start typing in the box. Any way around this ? Perhaps i am using the wrong class on my <input> or <div>.
You need to add the little x yourself, it's not something that magically appears, unless you're using Internet Explorer.
Edit:
Since datatables creates this search box, You need to use fnInitComplete callback/function in datatables to target this search field, then you initialize this button.
You can see a working example here:
http://jsfiddle.net/d1zqsayh/20/
Edit:
You're referring to the behavior in Chrome for input type=search
Just change the input type from text to search and it will do this behavior in Chrome.
See here: http://jsfiddle.net/d1zqsayh/23/
Should your div class be dataTables_wrapper, not _filter, perhaps?
When i click on a textfield, i get a dropdown so the user could select a value from the list.
After the user selects the date from the dropdown, he/she could edit the date by even adding characters to it. So i want to find a way to prevent this. I thought of making the field un-editable. So i used readonly but, this prevents the user from clicking and displaying the list. So can someone tell me how can i make the field uneditable.
<input id="datePiccc" type="text" class="dates" />
You can use the below code. This will make the text input field clickable but when the user types in anything, nothing would happen.
document.getElementById('datePiccc').onkeydown = function(e){
e.preventDefault();
}
Fiddle Demo
As pointed out by nnnnnn, onkeydown is a better option than onkeypress as it would stop the delete and backspace key functions.
You could add the below also to your code to nullify Cut and Paste events1. (Note: Not doing anything for Copy as that operation isn't going to change the value of the text field).
document.getElementById('datePiccc').oncut = function(e){
e.preventDefault();
}
document.getElementById('datePiccc').onpaste = function(e){
e.preventDefault();
}
1 I think these should work in all browsers. Currently tested in Chrome 31, Opera 15, IE10 and FireFox 24. (Note: In IE10, there is an x mark which appears on the right side of the input field which when clicked clears the entire field value. Could not find a way around this.)
I'm assuming the text field is being set in javascript. If so, you can use the following line to disable the field:
document.getElementById('datePiccc').disabled=true;
The input will remain as it is and the value from the selection field can also be set.
Disable the input in JQuery as
$("#datePiccc").attr("disabled", true);
And in pure JS
document.getElementById('datePiccc').disabled = true;
May be this can help!
I am trying to add javascript to set Focus on a button, and hope to make the button look just the way it does when a user 'tabs' thru the HTML Form to reach the button.
The page that I am working on has an button element:
<input type="Submit" id="myBtn" class="myBtnClass >
In javascript function, I set focus to it using:
$("#myBtn").focus() When this function is invoked, I can see change of button image. Also, when I click 'Enter', the form does get submitted. However, in this case, when the image changes, I don't see the "Dotted inline" that generally appears on buttons.
but the dotted line Does appear when a user "tabs" to that button.
Am I expected to do anything other than $("#myBtn").focus()" ?
you can use css property:
`outline`
Could be running in IE7 compatibility mode, or using the wrong doctype.
See this similar question for more info and possible solutions: CSS 'outline' property in IE, and jQuery errors
I am using the tinymce editor to give a good look of textarea where user write some comments. I want to give him two options: one is plain text and the other is a rich text editor option. When the user clicks on plain text option all rich text option removed and when user click on rich text it will get all options of formatting text. I want to do this in TinyMce Editor.
Is there anyone know how to implement it? I am searching from last 6 days how to implement this but i am failed to get any solution.
This is what i did for my site;
<script type="text/javascript">
function changeposttype(){
if($("#posttype option:selected").text() == 'Simple'){
//tinymce.execCommand('mceToggleEditor',true,'new-post-desc');
tinyMCE.execCommand('mceRemoveControl', false, 'new-post-desc');
}else{
tinyMCE.execCommand('mceAddControl', false, 'new-post-desc');
}
}
</script>
And inside BODY tag
<select id="posttype" onchange="changeposttype()">
<option>Rich</option>
<option>Simple</option>
</select>
<br />
<textarea id="new-post-desc" class="PostEditor"></textarea>
Well, you can take a look here:
Toggle editor with JavaScript
The code used is:
toggleEditor('content')
If you want the editor mode to be toggled based on the option chose by the user from another page, you can execute (or not to) the above function on page load.
There are links to other examples on that page which you might find useful too.
Update:
Upon reading the question a second time, you are asking for a plain-text/html and not a html-source/wysiwyg model. My suggestion above isn't the exact solution but it is still workable if the mode switching in the plain-text mode is hidden and locked.