I want to have an edit button which turns into a textarea when clicked. However, when I do click the button, the resulting textarea will not hold keyboard focus and I cannot edit it.
Javascript code:
var listEditHTML = "\
<textarea name='edit_text'> Enter a date </textarea>\
";
$(document).ready(function()
{
var App = { };
App.default_text = 'Enter a date';
$('button').click(function(){
$(this).html(listEditHTML);
});
});
HTML code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<button> edit </button>
Also the code was created with JFiddle so here's the fiddle if anyone's interested:
http://jsfiddle.net/wasingej/TT5nw/17/
note: I also tried running this code in the W3schools 'tryit' editor and it produced the same results so I doubt that the issue is with my Fiddle.
try this:
$('button').click(function(){
$(this).after(listEditHTML);
$(this).remove();
});
or as #Dan pointed out, use replaceWith
The problem is, you're putting the text field inside the button (you can see the button-y background in your original fiddle). You want to put the field after the button, then remove the button.
You are creating a text area inside the button,
you need to do #
$(this).parent().html(listEditHTML);
look here
http://jsfiddle.net/SdJrX/
Warning: this will replace all the content of the button: if there were chidren inside it they will be lost.
Related
I want to make a WhatsApp share button for my Android app. All is set, the only problem is that I can get the textarea value only when I click on a button:
<button onclick="GetValue ();">Get the value of the textarea!</button>
I want to GetValue(); without the onclick.
This is my WhatsApp code:
Share
I want the textarea value in the data-text attribute and I am using it like above but it doesn’t work.
This is my textarea:
<textarea id="input_output" style="width:95%;" rows="10" wrap="soft">Enter Text Here..
</textarea>
Is there any way to get the value without clicking the button?
This is my function:
GetValue () {
var area = document.getElementById ("input_output");
alert (area.value);
}
Using javascript
document.getElementById("input_output").value
Using jQuery
$('#input_output').val();
EDIT:
Probably misunderstood, but it's very hard to understand your question.
As a javascript click event always fires before the "href" sets in, you can set the value when the link is clicked.
$('a').click(function(){
$(this).attr('data-text', $('#input_output').val());
return true;
});
When a user pastes some text into a field I want to be able to remove all spaces instantly.
<input type="text" class="white-space-is-dead" value="dor on" />
$('.white-space-is-dead').change(function() {
$(this).val($(this).val().replace(/\s/g,""));
});
http://jsfiddle.net/U3CRg/22/
This code from another example works. But doesn't update until a user clicks on something besides the textbox. I am using MVC with jQuery/JavaScript.
Switch the event change for input, which will trigger whenever something is inputted into the field, even if text is being pasted.
$('.white-space-is-dead').on('input', function() {
$(this).val($(this).val().replace(/\s/g,""));
});
Take a look at jQuery Events to understand better what options you have.
Edit: updated the answer based on OP's comment and what I found on this answer.
The regex wasnt doing what you wanted. This works but does not fire until the text input loses focus.
$('.white-space-is-dead').change(function() {
$(this).val($(this).val().replace(/ /g,''));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="white-space-is-dead" value="dor on" />
I am using javascript function keyup with editable div and text input filed use for add text into editable div so my code work fine but recently i am add CKeditor plugin for editing text.
for example if i set text in input field keyup function work and these text set into editable div now i want to use Ckeditor for customizing after customization if i want to change text with input field than editing lost and return on default style.
Javasacript
$('#input1').keyup(function () {
txt = $('#input1').val();
$('#field1').text(txt);
});
HTML
<input type="text" id="input1">
<div id="field1" contentEditable='true'; ></div>
Try using the following:
$(document).on("keydown", "#input1", function() {
txt = $('#input1').val();
$('#field1').text(txt);
});
Online example
EDIT 1:
If you want to make sure that the initial input is also updated upon change of div, you should try the following:
$(document).on("DOMSubtreeModified", "#field1", function() {
$('#input1').val($('#field1').text());
});
Try clicking on the button or modifying div's content via Firebug, for example and see how input is also changed.
I wouldn't use keyup in your case but changed it as such upon your request.
Online example
I have jquery that generates textareas with different id's. Now i need to make some buttons that will format text inside that textareas. For example: when user clicks in certain textarea, enter text, and click "bold" button, only text inside of that textarea will become bold (in other will be normal). I did manage to make something like this with JS, but it was too primitive (text was formated in all of textboxes) :(
Here is some sample code for this:
<button id="bold">B</button>
<textarea id="ta_1">Some test text</textarea>
<textarea id="ta_2">Some test text</textarea>
What i want to say: one button, multiply text boxes. Entering text in ta_1 and clicking bold, should bold only text in that txtarea. Additional info: all id's starting with same word, just different number at the end.
I feel there is some simple solution, just cant figure it out :D
Actually this is a really bad practice, but you can do that like this,
var activeEl;
$("textarea").focus(function() {
activeEl = $(this);
});
$("#bold").click(function() {
$("textarea").css("font-weight", "");
activeEl.css("font-weight","bold");
});
DEMO
UPDATE-1: I don't know why you are trying to do this, but I suggest to you use a WYSIWYG Editor like elRTE
UPDATE-2 : You can costomize your toolbar in elRTE, if you want your editor has just a "bold" button, yes you can do that,
$(document).ready(function() {
elRTE.prototype.options.panels.web2pyPanel = ['bold'];
elRTE.prototype.options.toolbars.web2pyToolbar = ['web2pyPanel'];
var opts = {
toolbar: 'web2pyToolbar',
}
var rte = $('#our-element').elrte(opts);
});
DEMO FOR elRTE
I'm not sure this is a great idea for user functionality, but it can be done. You'll just need to record the "active textarea" somwhere. I would suggest using .data(). jsFiddle
//disable the button until we have a target textarea to avoid confusion
$('#bold').attr('disabled','disabled');
//Record a new 'activeElement' each time user focuses a textarea
$('textarea').focus(function(e){
$('#bold').data('activeElement',e.target)
.removeAttr('disabled');//this first time we will enable the bold button
});
//retrieve the stored 'activeElement' and do something to it
$('#bold').click(function(){
var activeElement = $('#bold').data('activeElement');
$(activeElement).css('font-weight','bold');
});
Most people expect a "text formatting" button to work on their selection. Selections and ranges are out of the perview of jQuery and quite complicated to work with. As has been suggested already, I would advise using one of the many wonderful WYSIWYGs like tinyMCE.
Use document.activeElement
var activeEl;
$('#bold').mousedown(function()
{
activeEl = document.activeElement
});
$("#bold").click(function() {
//check activeElement
if(......){
activeEl .css("font-weight","bold");
}
});
Don't forget check that activeElement exactly textarea
Basically I need to create a textarea that is character limited, but will have a single word at the beginning, that they can't change.
It needs to be a part of the textarea, but I don't want users to be able to remove it or edit it.
I was thinking I could create a JQuery function using blur() to prevent the user from backspacing, but I also need to prevent them from selecting that word and deleting it.
UPDATE
I wrote this JQuery which seems to work great! However I like the solution below as it requires no Javascript.
<script type="text/javascript">
var $el = $("textarea#message_create_body");
$el.data('oldVal', $el.val());
$el.bind('keydown keyup keypress', function () {
var header = "Header: ";
var $this = $(this);
$this.data('newVal', $this.val());
var newValue = $this.data("newVal");
var oldValue = $this.data("oldVal");
// Check to make sure header not removed
if (!(newValue.substr(0, header.length) === header)) {
$(this).val(oldValue);
} else {
$(this).data('oldVal', $(this).val());
}
});
</script>
If you just want the textarea to show a prefix, you can use a label, change the position, and indent the textarea content. User will not notice the difference.
You can see how it works here: http://jsfiddle.net/FLEA3/.
How about just putting this word as a label next to the textbox? It may be confusing for the users not to be able to edit part of the text in the textbox.
Wouldn't it be better if you just alert the user that whatever he inputs in the textarea will be submitted with a "prefix" and then
show the prefix as a label before the textarea
add the prefix to the inputted text before submitting