<input> element in tinymce - javascript

I want to have input element in my editor so user can type something in it. I've tried just write html in my textarea but the input element goes unclickable (ex1)
Value: <input type='text' value='12.3'> kg
I've also tried to make contenteditable="true" div and input worked in it without problems, so it is tinymce problem (ex2)
I can't use input in editor even if I initialize tinymce with div and set html manually
ed.getBody().innerHTML = "Value: <input type='text' value='12.3'> kg"

You can't have an input element into textarea element.
Try
<form method="post" action="dump.php">
<label for="kgElement">Value:</label>
<input type='text' id="kgElement" placeholder='12.3'> kg
</form>

That is because you're having the Input field inside the textarea element. Which itself is fully editable.
Take it out of the textarea, and then it would work just the way you want it to.

Related

Trying to put an "€" sign into a input - but no luck

I'm trying to put a euro sign inside an input but despite everything, I can't get it to work.
It's a plugin that display a slider for a form, I tried to add a div to contain this input inside the plugin file, but it doesn't work either.
Here's what I tried, but I'm not sure if it can work this way with javascript
var input = $( "#input_1_30" );
input.val( input() + "€" );
<div class="ginput_container"><input name="input_30" id="input_1_30" type="number" step="500" min="0" max="250000" data-value-visibility="show" data-connect="lower" value="25000" class="slider large" data-min-relation="" data-max-relation="" data-value-format="decimal_dot">
Thanks
As I said in my comment, I used HTML text input field with currency symbol
<label>€
<input name="input_30" id="input_1_30" type="number" step="500" min="0" max="250000" data-value-visibility="show" data-connect="lower" value="25000" class="slider large" data-min-relation="" data-max-relation="" data-value-format="decimal_dot">
</label>
This isn't a job for JS. Place the € next to the form input in html and style it accordingly using CSS.
Edit
The benefit of using a label here is that clicking the contents of the label brings the input into focus, which other methods wouldn't do by default.
I am not entirely sure what you want to do but what you can do is add the euro sign as a placeholder in the input field but it will disappear after a user adds their earnings.
If you still want add it in the placeholder attribute, you can do this in the input tag
<input placeholder="€"/>
I hope this helped and if you want to know more about placeholders and input tags you can check INPUT Placeholder Attribute (MDN).

Copy Text from Input form into DIV

I want to create 1 input field and one Div.
When u write text in the Input and hit the button i want the text to be displayed in the DIV. Its so simple but it just won't work.. i hope someone can do this easy task for me.
I tried last:
<form>
Bearbeitungstext: <input id="textInput" type="text"><br>
<input type="button" value="text einbinden" onclick="$('texxxt').val($('#textInput').val())">
</form>
<div id="texxxt">
</div>
Try to use id selector properly,
$('#texxxt').text($('#textInput').val());
Also you have to use .text() instead of .val(), .val() is not a function for div elements. It is for form elements which are having value property.
And the best approach for your case would be binding an explicit event handler,
var div = $("#texxxt"),inp = $("#textInput");
$("form button").click(function(e){
e.preventDefault();
div.text(inp.val());
});
This can be done with php $_GET($whatever); also, to do this you will need the name="whatever" on the input field.
Bearbeitungstext:
<input id="textInput" type="text"/><br>
<input type="button" value="text einbinden" onclick="$('#texxxt').html($('#textInput').val())"/>
<div id="texxxt">
to change DIV content we use html() not val()

HTML Form Elements VS Input Element Types

HTML has 13 form elements and the input element has 23 different types. My question is what is the reasoning behind making a form element a type of input or its own element?
At first I thought maybe its because all input types are just variants on input type=text, but that doesn't make sense when you throw checkbox and radio into the mix. Perhaps they would be better as their own form elements?
<input type="checkbox" name="check" value="yes">
// Would become
<checkbox name="check" value="yes">
Another form element that doesn't make sense to me is textarea for two reasons.
According to How to change the Content of a with Javascript you can use element.value to both set and retrieve a textarea's contents. Yet textarea doesn't have the value attribute, at least its not shown in the DOM.
The way textareas behave when resetting a form is inconsistent with other form elements. All input elements will be reset to the value of their value attribute. But a textarea is reset to whatever its 'value' (quotes because it doesn't have a value attribute in the DOM) was set as when the page loaded.
Example 1 (consistent with input): If you click the reset button, both input and 'textarea' will be reset to their 'initial' values (Example use jQuery). JSFiddle
<form>
<input type="text" name="text" value="initial" />
<textarea>initial</textarea>
<button type="reset">Reset</button>
</form>
<script>
$('input, textarea').val('set by javascript');
</script>
Example 2 (inconsistent with input): You cannot use .attr('value') with textarea elements, which means the following example doesn't work. You have to use $('textarea').text() or $('textarea').html() in order to set the default value.
<form>
<input type="text" name="text" value="initial" />
<textarea>initial</textarea>
<button type="reset">Reset</button>
</form>
<script>
$('input, textarea').attr('value', 'set by javascript');
</script>
There are other things that don't make sense to me but I will only highlight these two in my question. I'm hoping someone can explain to me why HTML and Javascript treat form elements differently (specifically when its comes to getting, setting, and resetting their values), and why certain form elements have their own elements and why others are just types of the input element.

How to modify label of input using JQuery

I have HTML like following :
<div class="task-manager">
<label>Manager: <input type="text" value="" /></label>
</div>
I need to modify text of label Manager dynamically.
I tried using JQUERY text method, but it replaces input type also.
$taskTemplate.find(".task-manager label").text("M123")
You can use:
$taskTemplate.find(".task-manager label").contents().get(0).nodeValue = "M123:";
You should change your HTML code, because <input> field is inside <label> and when you are changing value of this label, it's also overwriting and removing input form field:
<div class="task-manager">
<label>Manager:</label> <input type="text" value="" />
</div>
Just move the Input tag outside the label tag, because when your updating the text of your label, its erasing the content of label (which will obviously remove input tag inside it) , so change your code like this
HTML code:
<div class="task-manager">
<label for="title">Manager:</label>
<input type="text" id = 'title' value="" />
</div>
JS code:
$('.task-manager label').text('Deputy Manager :');
Live Demo # Jsfiddle:
http://jsfiddle.net/dreamweiver/w6arp71x/
note/suggestion:for attribute added to label to bind the input to the label by default
$taskTemplate.find(".task-manager label").contents().get(0).nodeValue = "M123:"
this worked for :)

Jquery validation on div content

I am extending the functionality of a Business Intelligence tool. This is a web based application. Currently attempting to create some type of "form" validation. The strange thing is that this application reuses the same input for every single one of the form inputs. Once the user clicks away from the input html object, some javascript moves the value entered into the input into the text within a div.
Before:
<div>
</div>
Input filled out:
<input type="text" value="this is a test">
Result:
<div>
this is a test>
</div>
Is there any way to create a listener which will validate what is written inside of the div?
try this
<input type="text" value="this is a test"/>
instead of
<input type=text value=this is a test></input>
hope this helps...

Categories

Resources