如何提交输入字段的ID

Question

Is it possible (and if so, how) to submit the ID of the input field in focus when clicking it? 单击时是否可以（如果可以，如何）提交焦点对准的输入字段的ID？ I've made an autosave-feature in a online-tool, that saves every time an input field is blurred. 我在在线工具中做了一个自动保存功能，每次输入字段模糊时都会保存。

However, since the page itself is updated on every field blur, it loses focus when another field is clicked, so I would like it to submit the ID of the field, just clicked so that I can set it in focus, manually. 但是，由于页面本身在每个字段模糊时都进行了更新，因此单击另一个字段时它会失去焦点，因此我希望它提交刚刚单击的字段ID，以便我可以手动将其设置为焦点。

(off-topic) I don't use jQuery anymore when updating, since I need the page to process a lot of numbers, serverside... so in my opinion, it's most convenient that it works as described. （离题）我在更新时不再使用jQuery，因为我需要页面在服务器端处理大量数字，因此，我认为，按说明工作是最方便的。

I've done some researching and ended up with two possibilities: 我做了一些研究，最后有两种可能性：

focusobject = $(':focus');

and 和

document.activeElement

but when doing a JS alert, it just says [object Object] and [object HTMLBodyElement] instead of "fieldEmail" 但是当执行JS警报时，它只说[object Object]和[object HTMLBodyElement]而不是“ fieldEmail”

Any ideas? 有任何想法吗？

UPDATE UPDATE

I previously used this to update in the background: 我以前用它在后台更新：

function writeNow(datastring) {
    $.ajax( {
        type: 'POST',
        url: 'update.php',
        data: datastring, 
        success: function(data) {
            // Do nothing       
            }
    });
}

This updates the fields just fine on onBlur, but the page itself calculates a lot of results, based on several class methods on runtime. 这样就可以在onBlur上很好地更新字段，但是页面本身根据运行时的几种类方法计算出很多结果。 If I use AJAX to update the database values, I don't see how I can set the class variables and display the correct result without reloading. 如果使用AJAX更新数据库值，则看不到如何设置类变量并显示正确的结果而无需重新加载。

Answer 1

When you click on an element, it's more likely that it will get focus (unless there is some wizardry that prevents the click from requesting the focus). 当您单击某个元素时，它很有可能会获得焦点（除非有一些向导阻止该点击请求焦点）。 You may simply handle the onclick event of an input group and save it. 您可以简单地处理输入组的onclick事件并将其保存。

Let imagine some input fields that all have classname txt-group-1 : 假设一些输入字段都具有类名txt-group-1 ：

Plain JS 普通JS

var lastFocus = null;
if (document.activeElement.className == 'txt-group-1') {
    lastFocus = document.activeElement.id; // get the field that already has focus
}

var inputs = document.getElementsByClassName('txt-group-1');
for (var i=0;i<inputs.length;i++) {
    inputs[i].addEventListener('click', function(evt){
        alert(this.id+' has focus!');
        lastFocus = this.id;
    },true);
}

jQuery jQuery的

var lastFocus = null;
if (document.activeElement.className == 'txt-group-1') {
    lastFocus = document.activeElement.id; // get the field that already has focus
}

$('.txt-group-1').click(function(evt){
    alert(this.id+' has focus!');
    lastFocus = this.id;
});

Then, lastFocus will always have the ID of the last element that had focus so you can put it back if needed. 然后， lastFocus将始终具有具有焦点的最后一个元素的ID，因此您可以根据需要将其放回去。

UPDATE: 更新：

in case of a CMS that needs to save the fields: 如果是CMS，则需要保存字段：

Your best friend in that situation will be ajax . 在这种情况下，您最好的朋友将是ajax 。 The idea is to be able to save the new value in database without having to refresh the whole page, hence stopping any action that goes after. 这个想法是能够在不刷新整个页面的情况下将新值保存在数据库中，从而停止执行后续操作。

I suggest that you take a look at the method that saves the fields and optimize it in a way that it doesn't need to refresh the page: 我建议您看一下保存字段并以不需要刷新页面的方式对其进行优化的方法：

$.ajax({
  url: "save.php",
  data: {inputFieldName:'txtEmail', inputFieldValue:'foobar@mail.com'}
})
.done(function(data) {
  console.log('saved'); // after the request is complete
});

Any post-save client-side action may be specified in the .done event. 可以在.done事件中指定任何保存后的客户端操作。 It's also possible to get a response from the server-side script that execute your request. 也可以从执行请求的服务器端脚本中获得响应。

Answer 2

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<input name="testfield" type="text" id="mtTextField" onClick="alertId(this.id);">
<script type="text/javascript">
    function alertId(getid)
    {
        alert(getid);   
    }
</script>
</body>
</html>

Try out this code. 试试这个代码。

Answer 3

Use's Harsha's snippet except hang it on the "onchange", otherwise you will create an issue with tab navigation. 使用Harsha的代码段，但将其挂在“ onchange”上，否则，标签导航会产生问题。 You will have to modify your save function slightly so it won't trigger with every character. 您将需要稍微修改保存功能，以免触发每个字符。 Also instead of updating the entire page I suggest using AJAX. 另外，我建议不要使用整个AJAX来更新整个页面。

如何提交输入字段的ID

问题描述

3 个解决方案

解决方案1
1 已采纳 2013-05-27 21:08:04

解决方案2
0 2013-05-27 19:30:54

解决方案3
0 2013-05-27 20:56:46

如何提交输入字段的ID

问题描述

3 个解决方案

解决方案1 1 已采纳 2013-05-27 21:08:04

解决方案2 0 2013-05-27 19:30:54

解决方案3 0 2013-05-27 20:56:46

解决方案1
1 已采纳 2013-05-27 21:08:04

解决方案2
0 2013-05-27 19:30:54

解决方案3
0 2013-05-27 20:56:46