Question

如果用户在键入街道数据后单击保存按钮作为下一个操作，则onblur操作会拦截onclick并且不会触发保存。但是，如果你添加一些填充（30px）并单击上面的单词保存它可以工作，但在单词保存下面它不起作用，与没有填充相同。我确定某些用户会在输入字段中输入文字，然后单击“保存”，除非他们首先单击其他位置，然后单击“保存”，否则将失败。我在下面提供了html和javascript示例。有没有办法使用javascript来解决这个问题？

<html>
<script>
 function showstreet() { 
   var x = document.getElementById('street').value;
   alert(x);
 }
 function focused() {
   document.getElementById('title').style.display='';
   document.getElementById('street').value='';
 }
 function blured() {
   document.getElementById('title').style.display='none';
   if (document.getElementById('street').value == '') {
       document.getElementById('street').value='street';
   }
 }
</script>
<style>
 .pad5  { padding:5px;  }
 .pad30 { padding:30px; }
</style>
<body>
 <div id="title" class="pad5" style="display:none;">STREET NAME</div>
 <div>
  <input id="street" type="text" name="street" value="street" class="pad5"
   onfocus="focused()" onblur="blured()">
 </div>
 <br>
 <div>
  <input type="button" value="Save" class="pad30" onclick="showstreet()">
 </div>
</body>
</html>

我将此转换为jsfiddle，但我没有做正确的事（新手）https://jsfiddle.net/eyo63mav/26/

Answer 1

在保存按钮中使用library(reshape2) melt(setNames(num, name))[2:1] # L1 value #1 Alex 1 #2 Alex 2 #3 Alex 3 #4 Patrick 4 #5 Patrick 5 #6 Patrick 6 #7 Patrick 7代替onMouseDown。然后在onClick

之前触发onMouseDown

Answer 2

下面是工作代码

＆＃13;

function showstreet() {
  var x = document.getElementById('street').value;
  alert(x);
}

function focused() {
  document.getElementById('title').style.display = '';
  document.getElementById('street').value = '';
}

function blured() {
  document.getElementById('title').style.display = 'none';
  if (document.getElementById('street').value == '') {
    document.getElementById('street').value = 'street';
  }
}

＆＃13;

<div id="title" class="pad5" style="display:none;">STREET NAME</div>
<div>
  <input id="street" type="text" value="street" class="pad5" onfocus="focused()" onblur="blured()">
</div>
<br>
<div>
  <input type="button" value="Save" class="pad30" onclick="showstreet()">
</div>

＆＃13;

Answer 3

样式很少会对事件产生影响 - 现在，虽然这是一个全面的陈述，但在很多情况下，我们发现内联元素（如链接或段落）的样式在内联事件（例如{）中会出现问题{1}}和OnClick，在您的情况下，添加30个像素大小的按钮不是您的问题。

您的代码存在的问题是，您将OnFocus的值分配给的变量是本地的（它位于#title范围内，属于showstreet()只能通过前面提到的功能访问） - 永远不要，它永远不会再使用。您为其保存了一个值，它会提醒用户，而且它 - 它从未被重新分配或重复使用，因此，当它永远保留为他们输入的街道名称时，您就会＆＃39 ;除非你把它应用到某个东西上，否则永远不会看到它。

我花了一段时间才弄清楚你究竟想要保存什么，但我想我已经设法了。

这是我创建的代码：

var streetValue = "Your street will appear here.";


    function clickedField() {

        // Init title
        document.getElementById('title').innerHTML = streetValue;

        // Reset field
        document.getElementById('street').value = '';

    }


    function saveValue() {
        // Reassign streetValue
        streetValue = document.getElementById('street').value;

        // Checking if value was left empty
        if (streetValue === '') {
            document.getElementById('title').innerHTML = "Error: No Street Entered!";
        } else {
            document.getElementById('title').innerHTML = streetValue;
        }
    }

（我并不完全确定您拥有onblur的内容，但是应该很容易插回来。如果您需要一些帮助，请回复我的回复，我会发现很高兴。）

现在，如果我们使用适当的函数更新HTML：

 <div id="title" class="pad5" style="">STREET NAME</div>
 <div>
  <input id="street" type="text" name="street" value="street" class="pad5"
   onfocus="clickedField()">
 </div>
 <br>
 <div>
  <input type="button" value="Save" class="pad30" onclick="saveValue()">
 </div>

在onfocus文本输入时，Javascript onclick无法发送值

3 个答案: