Question

我有默认值的文本框，当我尝试输入时，我无法输入值，我必须先使用删除键删除现有值，然后才能输入。

我想输入值并在标签上更改它也应该更改为另一个框，目前它正在更改焦点，但我无法在其中输入值。

<input type="text" name="namebox" id="{concat('textboxvalue', position())}" value="{@proj}" style="font-size:10px;padding:0px;height:15px;width:90px;text-align:right;"/>

@proj：来自数据库的值

谢谢， ANI

Answer 1

您可以在输入标记和textarea标记中使用占位符：

<input type='text' placeholder='Default text here' />
<textarea placeholder='Default text here'></textarea>

然后使用jQuery的回退：

$(document).ready(function(e){
    var defaultVal = "Default text here";
    $("input, textarea").val(defaultVal).on("focus", function(){
        if($(this).val() == defaultVal){
            $(this).val("");
        }
    }).on("blur", function(){
        if($(this).val() == ""){
            $(this).val(defaultVal);
        }
    });

});

此处：http://jsfiddle.net/EZexQ/1/

Answer 2

我建议你看一下this css-trick article 它有一个带有jquery回退的html5占位符属性的示例。

function elementSupportsAttribute(element, attribute) {
  var test = document.createElement(element);
  if (attribute in test) {
    return true;
  } else {
    return false;
  }
};  


if (!elementSupportsAttribute('textarea', 'placeholder')) {
  // Fallback for browsers that don't support HTML5 placeholder attribute
  $("#example-three")
    .data("originalText", $("#example-three").text())
    .css("color", "#999")
    .focus(function() {
        var $el = $(this);
        if (this.value == $el.data("originalText")) {
          this.value = "";
        }
    })
    .blur(function() {
      if (this.value == "") {
          this.value = $(this).data("originalText");
      }
    });
} else {
  // Browser does support HTML5 placeholder attribute, so use it.
  $("#example-three")
    .attr("placeholder", $("#example-three").text())
    .text("");
}

Answer 3

关注焦点。只需删除值即可。以下是jquery中的示例代码。可以使用普通的javscript来完成。

<input value=10>
<input value=20>
<input value=30>

$('input').on('focus', function(){
    $(this).val('')
})

Answer 4

输入元素有一个名为defaultValue的DOM属性。我给出了这个解决方案，因为占位符在旧浏览器中不起作用。

First name: <input type="text" name="fname" value="John"><br>
Last name: <input type="text" name="lname" value="Doe"><br>

在您的jQuery中，prop('defaultValue')可以访问它试试吧。

$('input').focus(function(){
 if($(this).val() == $(this).prop('defaultValue'))
    $(this).val('');
}).blur(function(){
    if($(this).val() == '')
    $(this).val($(this).prop('defaultValue'));
});

工作小提琴here

javascript：具有默认值的文本框

4 个答案: