i am planing to make my text box editable...
so i removed the id from the disabled code...
even i tested in fiddle its not working...
providing my cod below....
i am providing part of my code in fiddle i am not able to see the text box...
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
You have to use input instead of form:input, browser can render standard html tags and you have to provide standard html.
Live Demo
Change
<input id="behvrName" type="text" cssClass="icwText" path="" />
To
<input id="behvrName" type="text" cssClass="icwText" path="" />
cssClass and are also not standard attributes and you need to change them if you want them to be interpreted and act accordingly by browser. cssClass would be class.
spring:message and form:input are not plain HTML tags; rather, they are pseudo-tags processed by your server-side framework. If you want to use JSFiddle, you must use plain HTML.
Furthermore, your input's id is behvrName, but you're not selecting that. If you want to disable that input, use an appropriate selector $('#behvrName') in the JavaScript portion.
Related
Anything given inside a tag is not getting displayed in a particular text area in IE.
example : http://test:
Do you mean you wrote exactly http://test: and it is not displaying the text inside the tag? On my side it is displaying in IE 11.
Sample code:
<!DOCTYPE html>
<html>
<head>
<script>
function add_txt()
{
document.getElementById("t_area").value = "http://test:<a b>";
}
</script>
</head>
<body>
<textarea rows="4" cols="50" id="t_area">
</textarea>
<input type="button" value="add text" onclick="add_txt()">
</body>
</html>
Output:
It was recongnized as text so it can be displayed. If you try to add HTML inside textarea then it will not going to display. this is the behavior with all the browsers not just with IE.
So if you try to add a text it will surely display it.
You can try to make a test with above code. If your issue still persist then try to provide a sample code to produce the issue. I will try to make a test with it on my side.
There's a good chance that might be a repeat question, but I couldn't find an answer that seemed to resolve my problem. I'm trying to make a jQuery bit where text is inputted into a text box, a button is clicked, and the text in the text box gets appended to a div. The end product is to make a game, but for now I'm just trying to make sure that the variable gets stored and put into the div. Here's my HTML
<!DOCTYPE html>
<html>
<head>
<title>Maybe a game maybe</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h2>Please enter your name.</h2>
<form name="userInput">
<input type="text" name="textInput"/>
</form>
<button id="confirm">Confirm</button>
<br/>
<div class="textOutput"></div>
</body>
</html>
Here's my CSS
h2 {
font-family:arial;
}
form {
display: inline-block;
}
.list {
font-family:garamond;
color:#cc0000;
}
And here's my jQuery
$(document).ready(function(){
$('#confirm').click(function() {
var playerName = $('input[name=textInput]').val();
$(".textOutput").append("<p>" + playerName + "</p>");
});
});
The idea is that text that gets inputted into the textInput box gets stored in the variable playerName. Then a <p> that contains playerName is appended to the .textOutput <div> when the confirm button is clicked. I'm using a Codecademy tutorial to help me confirm this. The code is almost exactly like the code in the tutorial. The only differences are the names of certain items, and the fact that the confirm button is a button and not a div. The code works perfectly fine in the tutorial, but when I try it in a normal editor, it doesn't work at all. I've even tried copying and pasting the exact code in the tutorial into my editor and still doesn't work. The editor I'm using is Sublime Text 2. I can't find what I'm missing here. Thank you very much in advance.
Please replace
<script type="text/javascript" src="script.js"></script>
with
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
and then try you code:
$(document).ready(function(){
$('#confirm').click(function() {
var playerName = $('input[name=textInput]').val();
$(".textOutput").append("<p>" + playerName + "</p>");
});
});
I presume you are saving it as text file.
You have to save the file as .html or .htm and wrap the script in <script> tag and wrap the css in <style> tag and then open it in a browser.
you need to include the jquery-library:
put e.g.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
inside the head-tag.
You do not have any jQuery libraries in the head tag.
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
Your code works, as shown here. http://jsfiddle.net/haxtbh/2gMgQ/
I have a textarea and I want When I move over text area it will show button and when I click this button it will copy text of text area into my clipboard. Just like mediafire.com. So, what can i do that. I tried to find some solution but it not helpful for me.
Thank.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<textarea id="myid">My text here</textarea>
</body>
</html>
I think it's a flash based with some javascript solution like this one :
https://github.com/zeroclipboard/zeroclipboard
My guess is that you can't access hardware like keyboard with javascript.
Started the search here and found http://www.steamdev.com/zclip
Consider the code given at the end, which makes use of jQuery Mobile to enhance buttons.
The first button (original button) appears when page loads:
The second button (inserted button) is inserted by clicking the yellow box:
The problem here is, the inserted button cannot catch up the CSS styles. This scenario is very common (and not specific to jQuery Mobile) when we work with AJAX, but I have never able to find a solution or workaround for this problem.
What can I do to enhance the inserted button with CSS styles?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script type="text/javascript">
function insert(){
$("#result").html('<input type="button" value="Inserted button"/>');
}
</script>
</head>
<body>
<form>
<p class="ui-body-e ui-corner-all" style="padding:5px" onclick="insert()">Click here to insert the button</p>
<input type="button" value="Original button" />
<div id="result">
Button not inserted yet
</div>
</form>
</body>
</html>
After you insert the button's html:
$("#result").html('<input type="button" value="Inserted button"/>');
You can call .trigger('create') on its container to invoke the jQuery-mobile renderer on its contents, so your line would look like this:
$("#result").html('<input type="button" value="Inserted button"/>').trigger('create');
jQuery mobile adds extra elements/classes to your objects. This happens onpage load.
When you insert extra buttons or other objects (list,...) the style needs to be applied again.
in this case you use after you inserted the button $(_selector_for_new_button_).button();
jQuery mobile applies the nice button style for you.
First, some of you may notice that I reposted this question after deleting it. This is because it was mistakenly marked as a duplicate by someone who didn't bother to check - the question he linked to was about an <input> element; that solution does not work for textareas.
Anyway, consider the following code:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function caek() {
$('textarea[name=txt1]').val("cake");
$('textarea[name=txt1]').focus();
}
</script>
</head>
<body>
<div id="bar"></div>
<form name="frm1" id="cake">
<textarea name="txt1"></textarea>
</form>
<input type="button" value="Activate"
onclick="caek()">
</body>
</html>
When you run that, you will notice that the cursor is pushed to the start of the textarea, before the text. How can I make it come after all the text, at the end of the textarea? A non-inline solution would be optimal, but anything will do.
And a standalone solution (no plugins etc) would be perfect.
This is working for me.
function caek() {
txtArea = $('textarea[name=txt1]');
txtArea.val("cake");
txtArea.focus();
tmpStr = txtArea.val();
txtArea.val('');
txtArea.val(tmpStr);
}
This works.
$ta.text($ta.text()).focus()
Demo: http://jsfiddle.net/elclanrs/WWsBa/
You can use the rangyinputs jQuery plugin to do this in a cross platform way.
There's a demo here:
http://rangyinputs.googlecode.com/svn/trunk/demos/textinputs_jquery.html
Set the start and end to the same number and it'll set the cursor to that point (though it doesn't focus the textarea, so you have to tab into it to see the effect). In your case, you'd want to set it to the length of the text.