#javascript #jquery #html #xpath
#javascript #jquery #HTML #xpath
Вопрос:
* ОБНОВЛЕНИЕ: я новичок jQuery , а также использую XPath , и я изо всех сил пытаюсь найти правильное рабочее решение, которое будет blur динамически создаваться HTML element . Я .onblur event подключил (работает не так, как ожидалось) и попытался использовать $(document.activeElement) , но моя реализация может быть неверной. Я был бы признателен за любую помощь в создании рабочего решения, которое будет размывать this element ( jqInput ), когда пользователь нажимает в любом месте за пределами активного element . Я добавил HTML и jQuery/JavaScript ниже.
Некоторые идеи, которые у меня были:
(1) Используйте XPath для выбора dynamic HTML element ( jqInput ) , а затем используйте jQuery's .onClick метод blur this element , когда пользователь нажимает в любом месте за пределами области XPath выделенного element .
(2) Используйте $(document.activeElement) , чтобы определить, где .onblur должен сработать:
var thisTitle = input0;
var activeElement = $(document.activeElement);
if (thisTitle != activeElement) {
jqInput.hide();
_layout.viewHeaderTextInput.inputOnBlurHandler(canvasObj, jqHeaderText, jqInput);
}
Я открыт для всех рабочих решений. И, надеюсь, это ответит на чей-то вопрос в будущем.
Моя проблема: несколько elements активны, и .onblur не срабатывает. Смотрите изображение ниже:
ПРИМЕЧАНИЕ: <input /> поле имеет focus , а также <div> слева от (синий контур). Если пользователь щелкает где-либо за пределами этого <input /> , к blur нему должно быть применено element .
Мой код: jQuery и JavaScript
Это фрагмент кода, в котором создаются переменные jqInput и input0:
var jqInput = null;
if (jqHeaderText.next().hasClass("inline-editable"))
{
//Use existing input if it already exists
jqInput = jqHeaderText.next();
}
else
{
//Creaet a new editable header text input
jqInput = $("<input class="inline-editable" type="text"/>").insertAfter(jqHeaderText);
}
var input0 = jqInput.get(0);
//Assign key down event for the input when user preses enter to complete entering of the text
input0.onkeydown = function (e)
{
if (e.keyCode === 13)
{
jqInput.trigger("blur");
e.preventDefault();
e.stopPropagation();
}
};
Это мой .onblur event и мой помощник method в blur element :
input0.onblur = function ()
{
_layout.viewHeaderTextInput.inputOnBlurHandler(canvasObj, jqHeaderText, jqInput);
};
inputOnBlurHandler: function (canvasObj, jqHeaderText, jqInput)
{
// Hide input textbox
jqInput.hide();
// Store the value in the canvas
canvasObj.headingText = jqInput.val();
_layout.updateCanvasControlProperty(canvasObj.instanceid, "Title", canvasObj.headingText, canvasObj.headingText);
// Show header element
jqHeaderText.show();
_layout.$propertiesContent.find(".propertyGridEditWrapper").filter(function ()
{
return $(this).data("propertyName") === "Title";
}).find("input[type=text]").val(canvasObj.headingText); // Update the property grid title input element
}
Я пытался использовать активный элемент, но я не думаю, что реализация правильная:
var thisTitle = input0;
var activeElement = $(document.activeElement);
if (thisTitle != activeElement) {
jqInput.hide();
_layout.viewHeaderTextInput.inputOnBlurHandler(canvasObj, jqHeaderText, jqInput);
}
Мой HTML-код:
<div class="panel-header-c">
<div class="panel-header-wrapper">
<div class="panel-header-text" style="display: none;">(Enter View Title)</div><input class="inline-editable" type="text" style="display: block;"><div class="panel-header-controls">
<a href="javascript:;" class="collapse-vertical" tabindex="0"><span></span></a>
</div>
</div>
</div>
Я заранее благодарю вас всех.
Комментарии:
1. Что вы подразумеваете под размером ?
2. «Я хотел бы получить ваш вклад с идеей, которая у меня есть» звучит для меня так, как будто этот вопрос должен быть закрыт, потому что он, вероятно, будет генерировать ответы, основанные на мнениях. Кроме того: я думаю, что это ужасная идея, потому что, как вы заявили, есть гораздо более простые и лучшие способы сделать это.
3. @David Я прояснил свой вопрос и то, чего я пытаюсь достичь. Извиняюсь за путаницу
4. @Taplar Я обновил свой вопрос с помощью кода и некоторых методов, которые я пробовал
5. @PM77-1 Извинения. Я новичок в использовании XPath. Я улучшил свой вопрос