Topic: autofocus on input does not work.
info21 pro asked 7 years ago
riza free answered 5 years ago
please help I want to make an autofocus input tag when opening modal. this is my code: this doesn't work
Magdalena Dembna staff commented 5 years ago
Unfortunately your code doesn't show. Can you create a code snippet here: https://mdbootstrap.com/snippets/ ?
Bartłomiej Malanowski staff answered 7 years ago
info21 pro answered 7 years ago
Bartłomiej Malanowski staff answered 7 years ago
info21 pro answered 7 years ago
/* FORMS */
(function ($) {
// Text based inputs
var input_selector = 'input[type=text], input[type=password], input[type=email], input[type=url], input[type=tel], input[type=number], input[type=search], textarea';
// Function to update labels of text fields
Materialize.updateTextFields = function () {
var input_selector = 'input[type=text], input[type=password], input[type=email], input[type=url], input[type=tel], input[type=number], input[type=search], textarea';
$(input_selector).each(function (index, element) {
if ($(element).val().length > 0 || $(this).attr('placeholder') !== undefined || $(element)[0].validity.badInput === true) {
$(this).siblings('label, i').addClass('active');
} else {
$(this).siblings('label, i').removeClass('active');
}
});
};
// Add active when element has focus
$(document).on('focus', input_selector, function () {
$(this).siblings('label, i').addClass('active');
});
$(document).ready(function () {
// Add active if input element has been pre-populated on document ready
Materialize.updateTextFields();
$('input[autofocus]').trigger('focus');
// Text based inputs
var input_selector = 'input[type=text], input[type=password], input[type=email], input[type=url], input[type=tel], input[type=number], input[type=search], textarea';
// Handle HTML5 autofocus
//$('input[autofocus]').siblings('label, i').addClass('active');
// Add active if form auto complete
$(document).on('change', input_selector, function () {
if ($(this).val().length !== 0 || $(this).attr('placeholder') !== undefined) {
$(this).siblings('label, i').addClass('active');
}
validate_field($(this));
});
// HTML DOM FORM RESET handling
$(document).on('reset', function (e) {
var formReset = $(e.target);
if (formReset.is('form')) {
formReset.find(input_selector).removeClass('valid').removeClass('invalid');
formReset.find(input_selector).each(function () {
if ($(this).attr('value') === '') {
$(this).siblings('label, i').removeClass('active');
}
});
// Reset select
formReset.find('select.initialized').each(function () {
var reset_text = formReset.find('option[selected]').text();
formReset.siblings('input.select-dropdown').val(reset_text);
});
}
});
// Add active when element has focus
// $(document).on('focus', input_selector, function () {
// $(this).siblings('label, i').addClass('active');
// });
$(document).on('blur', input_selector, function () {
var $inputElement = $(this);
if ($inputElement.val().length === 0 && $inputElement[0].validity.badInput !== true && $inputElement.attr('placeholder') === undefined) {
$inputElement.siblings('label, i').removeClass('active');
}
validate_field($inputElement);
});
validate_field = function (object) {
var hasLength = object.attr('length') !== undefined;
var lenAttr = parseInt(object.attr('length'));
var len = object.val().length;
if (object.val().length === 0 && object[0].validity.badInput === false) {
if (object.hasClass('validate')) {
object.removeClass('valid');
object.removeClass('invalid');
}
} else {
if (object.hasClass('validate')) {
// Check for character counter attributes
if ((object.is(':valid') && hasLength && (len < lenAttr)) || (object.is(':valid') && !hasLength)) {
object.removeClass('invalid');
object.addClass('valid');
} else {
object.removeClass('valid');
object.addClass('invalid');
}
}
}
};
// Textarea Auto Resize
var hiddenDiv = $('.hiddendiv').first();
if (!hiddenDiv.length) {
hiddenDiv = $('<div class="hiddendiv common"></div>');
$('body').append(hiddenDiv);
}
var text_area_selector = '.materialize-textarea';
function textareaAutoResize($textarea) {
// Set font properties of hiddenDiv
var fontFamily = $textarea.css('font-family');
var fontSize = $textarea.css('font-size');
if (fontSize) {
hiddenDiv.css('font-size', fontSize);
}
if (fontFamily) {
hiddenDiv.css('font-family', fontFamily);
}
if ($textarea.attr('wrap') === "off") {
hiddenDiv.css('overflow-wrap', "normal")
.css('white-space', "pre");
}
hiddenDiv.text($textarea.val() + 'n');
var content = hiddenDiv.html().replace(/n/g, '<br>');
hiddenDiv.html(content);
// When textarea is hidden, width goes crazy.
// Approximate with half of window size
if ($textarea.is(':visible')) {
hiddenDiv.css('width', $textarea.width());
} else {
hiddenDiv.css('width', $(window).width() / 2);
}
$textarea.css('height', hiddenDiv.height());
}
$(text_area_selector).each(function () {
var $textarea = $(this);
if ($textarea.val().length) {
textareaAutoResize($textarea);
}
});
$('body').on('keyup keydown', text_area_selector, function () {
textareaAutoResize($(this));
});
}); // End of $(document).ready
}(jQuery));
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Pro
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No