2013-07-25 4 views
0

У меня есть текстовые поля со значениями по умолчанию, я не могу вводить значения в них, когда я пытаюсь войти, я должен сначала удалить существующее значение с помощью клавиши delete, а только я могу ввести ,javascript: текстовое поле со значением по умолчанию

Я хочу ввести значения и изменить вкладку, это должно измениться и для другого поля, в настоящее время оно меняет фокус, но я не могу вводить в них значения.

<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

+0

<входной тип = "текст" Name = "tproj" ID = "{CONCAT ('txtboxAdjustment', положение())}" стиль значение = "{@ проектируемый}" = "размер шрифта: 10px; обивка: 0px; высота: 15px; ширина: 90px; выравнивания текста: справа;" /> – Animesh

+0

показать нам код – Satpal

+0

ответ

4

Вы можете использовать заполнители во входных тегов и текстовой области теги:

<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/

+0

заполнителей не поддерживается всеми. – BenM

+1

Новейшие версии всех основных браузеров поддерживают его: http://caniuse.com/#search=placeholder. Стоит упомянуть об этом. – Halcyon

+0

Попробуйте это обновление: http://jsfiddle.net/EZexQ/1/. С возвратом Javascript. –

0

Я хотел бы предложить вам взглянуть на this css-trick article.
У этого есть пример с атрибутом html5 placeholder с возвратом jquery.

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(""); 
} 
0

В фокусе. Просто удалите значения. Ниже приведен пример кода в jquery. Может быть сделано с простым javscript.

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

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

, если пользователь вводит значение во входном сигнале, то он переориентирует то же самое, уже введенное значение будет очищено. –

0

Для элементов ввода есть свойство DOM, называемое defaultValue. Я предлагаю это решение, поскольку заполнители не работают в старых браузерах.

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

Смежные вопросы