Remove Chrome Autofill text onclick with Javascript or JQuery - javascript

I'm having trouble removing the text that is generated by Chrome autofill with JQuery. Thus far I have been doing this.
$(document).ready(function () {
$(".link").click(function () {
$("#textbox").val("");
return false;
});
This removes the text just fine except if it was auto fill text. I would like to be able to remove this text without disabling autocomplete altogether i.e. I don't want to use autocomplete="off."
Right now I'm using JQuery but I'm not opposed to just using plain Javascript instead.
P.S. These text boxes are ASP.NET MVC3 Html.TextBoxFor's. I don't know if that makes a difference.

Perhaps you can use the autocomplete="off" attribute on elements or on the form itself. Related question here Is there a W3C valid way to disable autocomplete in a HTML form?

Related

Capture key input on select (dropdown list) in JavaScript

I'm trying to capture the input on a dropdown in JavaScript when it is focused, but it appears to not throw events.
Without using a third party library, is there anyway to capture this input?
Example: http://jsfiddle.net/m4tndtu4/11/
you don't want a third party library, but tagged your question to jquery.
you also use jquery code inside your jsfiddle, and mix it with native js...
so i assume, that you would at least want to use jquery.
i edited your fiddle the following: http://jsfiddle.net/m4tndtu4/14/
i just deleted everything you wrote, and just entered one 'on' handler:
$("#sel1").on("keyup",function(){ //this captures selection changes
$("#output").css("background-color", "yellow").text($('#sel1 option:selected').text()); // change the css of output and set the text to the value of the selected option
var enteredSearchSequence = String.fromCharCode(e.which);
$("#input").css("background-color", "yellow").text(enteredSearchSequence);
});
currently, it shows only the last pressed key - and also don't work if SHIFT was pressed... but i guess, you can figure out, how to concat the keypress or even delete it, because it's treated as a new search.
btw. given that, you may want to take a look at angularjs or any other mvc - a list and a searchbox is quite easy with those frameworks!

Javascript focus does not work on dynamically loaded input box

I have a HTML markup in a template which has input element. I load it via Ajax call and put in existing html using jQuery's $(selector).html(response).
Basically it is a pop up box which loads from template. After loading pop up box I want to set focus on input box. I've written this code :
$("#prescribe-input").focus() after content is appended in existing HTML but it does not work. I tried doing it in traditional javascript way too document.getElementById("prescribe-input").focus()
Both do not work. For testing purpose I tried creating sample input box in Index.html of an app and set focus. it works perfectly. The problem is when I load html from template using $().html() it does not work.
Any way to focus it properly?
I know the code is very less here but the question is self explanatory I believe.
if you are using jquery then you can use .on() on dynamically generated elements
$("#prescribe-input").on( "focus", function() {
//do what ever you want
});
You should do this in the callback function:
$(selector).html(response, function(){
$("#prescribe-input").focus();
})

check with javascript if textbox is empty while using ajaxcontroltoolkit TextBoxWatermark

I have an asp.net TextBox and I'm using the TextBoxWatermark of AjaxControlToolkit to have it display some hing text while the box is empty.
Problem is, onclient click of a certain button, I want to determine if the textbox is empty. The javascript code of
document.getElementById(fieldName).value == ""
Is not working, since the WaterMark extender with it's hint text making the code to think the field is not empty.
Any solution to this?
You can use the wrapper to access whether the watermark is being displayed or not with get_IsWaterMarked.
Sys.Extended.UI.TextBoxWrapper.get_Wrapper(document.getElementById(fieldName)).get_IsWatermarked()
I tried this with version 4.1.7.1213 of AjaxControlToolKit.
Got the code from looking at the source code of the TextBoxWatermark control.
Refer to this: http://ajaxcontroltoolkit.codeplex.com/SourceControl/latest#Client/MicrosoftAjax.Extended/TextboxWatermark/TextboxWatermark.pre.js

Kendo UI how to change dropDownList to text field?

Once I create dropdown list from existing text field input in Kendo UI - is there a way of changing it back to text field?
$('#myInput').kendoDropDownList({...});
I wish to have something like:
var kendolist = $('#myInput').kendoDropDownList({...});
kendolist.textField({....});
or
kendolist.destroy().textField({....});
at best without extensive jQuery shenanigans... :)
I am afraid it is not possible to turn it back into regular textbox. You can use the destoy method of the widget, however there will be some HTML left which you will not really need and you will need to do some manually cleaning with JavaScript.
Better destroy the widget and remove all the HTML then add regular textbox manually.

ASP.NET MVC and CKEditor - no validation

I am using CKEditor, it works fine but it turns out that there is a problem with validation. I am using this trick:
$('input[type=submit]').bind('click', function () {
var ckContent = CKEDITOR.instances.Content.getData();
$("#Content").val(ckContent);
});
To make validation work, but it doesn't help at all. I mean, when I send a form, it binds value to a textarea, but jquery doesn't want to validate this. When I turn off CKEditor completely, validation works fine on pure textarea. So what is wrong? How can I make CKEditor work with ASP.NET's validation?
I'm thinking the input select is happening too late to be validated. So I think you need to update the text box after you blur the CKEditor.
var editor = CKEDITOR.replace('content');
editor.on('blur', function (e) {
$("#Content").val(this.getData());
});
EDIT: I'm assuming you're trying to get a required field validator to fail/pass. I forgot CKEditor will place <p> tags even if there is no content (by default). On your submit button click, try forcing an update:
$('input[type=submit]').bind('click', function () {
CKEDITOR.instances.Content.updateElement();
});
SECOND EDIT: By default, jQuery validation does not validate hidden fields. To override that feature with MVC's unobstructive javascript add $.validator.setDefaults({ ignore: '' }); right after the includes for the validation. This will allow all fields to be validated on the page.

Categories