I know how to remove text in a simple html textbox but html textareas seem much more complicated. instead of the value attribute you put the text right between:
<html>
<textarea> </textarea>.
</html>
This is why im having trouble making an onFocus and onBlur event.
<textarea name="message" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
Put anything for default value here
</textarea>
Live example: http://jsfiddle.net/SRYLg/
A textarea behaves like other <input> elements (with type text or password), instead of having a value attribute, the value is between the <textarea> and </textarea> tags.
Accessing and modifying the contents of the textfield is no difference. The below code displays a textarea and an input box. The same function is used for accessing the values and modifying it. If the value equals to "example text" when entering the input, the text is cleared. If the textarea / input box is empty when leaving it, "example text" will be put in it.
<textarea id="field1">example text</textarea>
<input id="field2" value="example text">
<script>
function addEvents(id) {
var field = document.getElementById(id);
field.onfocus = function () {
if (this.value == "example text") {
this.value = "";
}
};
field.onblur = function () {
if (this.value == "") {
this.value = "example text";
}
};
}
addEvents("field1");
addEvents("field2");
</script>
Live example
Your Javascript should have:
function RemoveText(obj)
{ obj.value = ''; }
And Your HTML element should have:
onfocus="RemoveText(this);"
what about calling a javascript function during the onFocus event?
function emptyText(){
document.getElementById(textarea).innerHTML = "";
}
Related
I'm trying to figure this out for a while.
All the examples I saw, use the html with input and span elements manually inserted
I have the following code that generate form and its datepicker elements dynamically:
#using (Html.BeginForm("Reload", "FileDate", FormMethod.Post, new { returnUrl = this.Request.RawUrl, id = "DateForm", onsubmit = "return ValidateDate();" } ))
{
#(Html.Kendo().DatePicker()
.Name("Date")
.Value(Session["FileDate"] == null ? DateTime.Now : Convert.ToDateTime(Session["FileDate"].ToString()))
.Events(e => e
.Change("datepicker_change")
)
)
#Html.Hidden("returnUrl", this.Request.RawUrl)
<script>
function datepicker_change() {
if(ValidateDate()){
$("#DateForm").submit();
}
}
</script>
}
When form is generated, I have the following code on the page:
This is a validation:
<script>
$(document).ready(function() {
$("#mainMenu").kendoMenu();
$("#Date").attr('required', 'required');
$("#Date").attr('data-WrongFormat-msg', 'Date Format is Wrong');
var validator = $("#container").kendoValidator({
rules: {
WrongFormat: function (input) {
if (input.is("[data-role=datepicker]")) {
var dateBox = input.data("kendoDatePicker");
return input.data("kendoDatePicker").value();
} else {
return true;
}
}
}
})
});
function ValidateDate()
{
var validator = $("#container").data("kendoValidator");
if (validator.validate()) {
return true;
}
else
{
return false;
}
}
</script>
When I provide the incorrect input or no input at all, I get the correct message in the span. However, this span section modifies the layout of the page:
How can I fix that, so my error span is placed underneath my form, the way it is shown in some examples like here: http://dojo.telerik.com/ikUfu:
I have the exact same issue. The problems seems to be that the validation message span element is in the wrong place for DatePickers. It is inside this element:
but, in all other widgets, it's inside the spam element one level higher:
So, it seems this is a bug in Telerik at the moment. It works for other widgets, but not for DatePicker. I'll see and find if this bug is already reported, and if not, report it. If you desperately need it fixed asap, I assume you could try some jquery magic to move the span element.
I've faced it too. Is there any proper solution for this issue?
My workaround in a nutshell:
Delete all possible old error messages
Move the new one into the proper HTML container
<div id="div_id">
<input id="input_id" type="text">
</div>
<script>
var validatable = $("[id='input_id'").kendoValidator({
rules: {
minimumLengthRule: function (input) {
var trimmedInputValue = $.trim(input.val());
return trimmedInputValue.length > 0 ;
}
},
messages: {
minimumLengthRule: "The input length is too short."
}
}).data("kendoValidator");
validatable.bind("validateInput", function (e) {
$("#div_id > span").not(':first').remove(); // 1.
if (!e.valid) {
$("[id='input_id_validationMessage'").appendTo('#div_id'); // 2.
}
});
</script>
I'm new in Angular and html development. So i don't know yet all features and code terms.
I created a form which contains a rich textarea field. I used nicEdit as this is the one recommended by mycompany (so cannot change of editor).
As you can see in the image below, nicEdit is working well.
But when I want to get the field content in ng-model, it doesn't work.
Most of forum Q&A informs that that ng-model does not working properly with that nicEdit textarea. I found something about a directive to create. So I tried by modifying one dedicated to ckEditor.
But it doesn't work. I found that $('div.nicEdit-main') was the div updated (but not my field htmlLondDesc attached to the nicEdit textarea, neither the ng-model).
I also found something about the nicEditors.findEditor('htmlLongDesc').getContent(); but i don't know where to use it in the ng-model...
So how to get the content of nicEdit and save it in ng-model ?
Thanks in advance for your help.
Here is an image of the text area
Here is my js and html code:
scApp.directive('ncGetContent', function () {
return {
require: 'ngModel',
link: function (scope, elm, attr, ngModel) {
var content = $('div.nicEdit-main').html();
if (!ngModel) return;
content.on('instanceReady', function () {
content.setData(ngModel.$viewValue);
});
function updateModel() {
scope.$apply(function () {
ngModel.$setViewValue(content.getData());
});
}
content.on('change', updateModel);
content.on('key', updateModel);
content.on('dataReady', updateModel);
ngModel.$render = function (value) {
content.setData(ngModel.$viewValue);
};
}
};
});
<head>
<script type="text/javascript">
bkLib.onDomLoaded(function() {
var myEditor = new nicEditor({buttonList : ['bold','italic','underline','subscript','superscript','forecolor','bgcolor']}).panelInstance('htmlLongDesc');
var nicInstance = nicEditors.findEditor('htmlLongDesc');
});
</script>
</head>
...
<textarea id="htmlLongDesc" cols="140" rows="6" name="htmlLongDesc" ng-model="user.htmlLongDesc" ncGetContent ></textarea>
I am seeking to create a reusable "employee lookup" control.
Note:I am assuming that a partial view is the best way to go.
I want multiple buttons on the page
Each button will call a PartialView and each button will have a specific textbox
Each partial will contain multiple Results (items)
On clicking one of the results I want to populate the button's textbox, that made the call, with the result
How am i able to do this, since the page will have multiple buttons and textboxes?
This control needs to be able to be called by multiple buttons
So, those buttons call an action which will render the partial which has those results?
I'm seeing multiple ways to do this. The easiest way is:
<button id="btn1" class="btns" data-target="txt1" type="button">A</button>
<button id="btn2" class="btns" data-target="txt2" type="button">B</button>
<input type="text" id="txt1" />
<input type="text" id="txt2" />
<div id="render">
</div>
<script>
var ajaxActive = false;
$(function() {
$(".btns").on('click', function () { // Bind the onclick of the button, so any button with this class may call the following function
var _button = $(this);
getItems(_button);
});
});
function getItems(_button) {
var bind = function (_button, results) {
$("#render").empty();
$("#render").append(results); // Append the partialview to the current view's div
$("#render .itemResult").on('click', function () { // Bind the onclick of the result
var resultValue = $(this).text(); // Or any other value that come from the result
var targetId = "#" + _button.data('target'); // Id of the input (Target) which comes from the clicked button
$(targetId).val(resultValue); // Change the input target value with the result one
});
};
if (ajaxActive) {
$.get('/Controller/Action') // Get the partialview
.done(function (results) {
bind(_button, results);
});
}
else {
var results = simulateCall(); // Get the results
bind(_button, results);
}
}
function simulateCall() { // Simulate a call to the server
return "<div class='items'> <div class='itemResult'>ABC</div> <div class='itemResult'>DEF</div> </div>";
}
</script>
PS: Here is a working demo
Keep in mind that i placed some sort of "call" to simulate it going to the database
I have a RitchText editor containing HTML tags and I am wondering if I can have a Text Area in my ASPX page displaying all these tags and also it should be editable.
I assume normal textbox is not an option here,
Any suggestions?
check this out... I put it in Console, so it would be easier to undersand:
using System;
using System.Net;
class Program
{
static void Main()
{
string a = WebUtility.HtmlEncode("<html><head><title>T</title></head></html>");
string b = WebUtility.HtmlDecode(a);
Console.WriteLine("After HtmlEncode: " + a);
Console.WriteLine("After HtmlDecode: " + b);
}
}
You can use jquery + jquery UI to transform a normal text tag such as "p" into a textbox, here i built an example:
http://jsfiddle.net/jXXgG/
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
];
$("#tag").hide();
$( "#tags" ).autocomplete({
source: availableTags
});
$("#tag").click(function(){
$("#tags").val($(this).text());
$(this).hide();
$("#tags").show();
});
$("#tags").blur(function() {
$("#tag").text($(this).val());
$(this).hide();
$("#tag").show();
});
Apologies if I've misunderstood you.
If you add a standard 'Richtext Editor' as a field's 'type' in the Umbraco document type - then you can access and edit the html tags within the Umbraco back-office, by clicking on 'html' in the top editor bar while you have your richtext field in focus:
Adding TinyMCE inside page is the trick.
im working on this jquery data entry form in which i need a specific field to be autocompleted with data from mysql
i got everything working, autocomplete retrieves data from the sql through php matching is great in english/latin and utf8 characters
the values get retrieved from the sql as "'number' => 'name'"
right now the autocomplete has 3 values in the output, value, label and id.
as id and value it uses the 'name'
and the label is the 'number' of my sql string (which is posted to the next page when the form is submited)
so everyting works ok, my 'number' is posted correctly, there is a minor annoyance tho
when i select something from the autocomplete list, the field is populated with the 'number'
is there any way to fill it with the 'name'?
ie: search for 'name', get dropdown with 'names', click and get the 'name' in the field, and when i submit i get the 'number' posted?
any help would be greatly appreciated.
if you need to take a look at my code, it's posted on a previous question: Jquery ui - Autocomplete - UTF8 charset
thanx in advance :)
The usual way to do this is:
Use a hidden input to hold the value you'd like to POST, then autocomplete a separate field.
Populate the hidden input on select
Populate the visible, autocompleted input with the label property of the item that was selected.
So, for example:
HTML:
<input type="hidden" name="name" />
<input type="text" id="name_auto" />
JavaScript:
$(function () {
var cache = {},
lastXhr;
$( ".name" ).autocomplete({
minLength: 1,
source: function( request, response ) {
var term = request.term;
if ( term in cache ) {
response( cache[ term ] );
return;
}
lastXhr = $.getJSON( "search.php", request, function( data, status, xhr ) {
cache[ term ] = data;
if ( xhr === lastXhr ) {
response( data );
}
});
},
select: function (event, ui) {
event.preventDefault();
this.value = ui.item.label;
},
change: function (event, ui) {
if (ui.item) {
$("input[name='name']").val(ui.item.value);
} else {
$("input[name='name']").val('');
}
}
});
});
You can use the result (handler) from u'r autocomplete
where the variable data such as arrays and you can return two data at once
Expl:
in javascript
$().ready(function()
{
var url = "<?=base_url()?>index.php/master/agen";
var width_val = 308;
$("#name_auto").autocomplete(url,
{
width: width_val,
selectFirst: false,
});
$("name_auto").result(function(event, data, format)
{
$("#name_auto").val(data[0]);
$("#id").val(data[1]);
});
});
in HTML :
<input type="hidden" name="number" id="id" />
<input type="text" id="name_auto" name="name" />
in PHP :
foreach ($source->result() as $row)
{
echo "$row->nama|$row->id\n";
}
note : here I use PHP CodeIgniter in its